實時jQuery搜索問題 - 顯示問題

我有列表和網格視圖和一個輸入框，您可以在其中搜索li元素。搜索在兩個視圖上都能正常工作。但是，如果在一個視圖上搜索，然後切換到另一個視圖，則會更改li元素的寬度並顯示不正確。實時jQuery搜索問題 - 顯示問題

HTML：輸入和計數顯示

<div class="input-group pull-left seach_holder"> 
    <form id="live-search" action="" class="styled live-search" method="post"> 
    <input style="width:200px;" id="filter_vacs" type="text" class="search-bar form-control" placeholder="search"> 
    <span class="vac_count_2" id="filter-count"></span> 
    <div class="input-group-btn"> 
    </div> 
    </form> 
</div>

JS：Live搜索

$(document).ready(function(){ 
    $("#filter_vacs").keyup(function(){ 

     // Retrieve the input field text and reset the count to zero 
     var filter = $(this).val(), count = 0; 

     // Loop through the comment list 
     $(".parent_vac li").each(function(){ 

      // If the list item does not contain the text phrase fade it out 
      if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
       $(this).fadeOut(1000); 

      // Show the list item if the phrase matches and increase the count by 1 
      } else { 
       $(this).show(); 
       count++; 
      } 
     }); 

     // Update the count 
     var numberItems = count; 
     $("#filter-count").text(""+count); 


    }); 
});

感謝您的幫助！

來源

2016-04-27 Kez

你能設置演示問題並分享我創建了一個小提琴鏈接 –

，但小提琴出於某種原因，網格/列表視圖不起作用。 :( – Kez

你能分享一個小提琴的鏈接嗎？ –

當元素根據CSS規範取得顯示屬性的「初始」值（只有在你沒有設置時）時纔會發生這種情況。

所以fadeOut &顯示將display屬性設置爲內聯css，並覆蓋你的css。

解決方案1 

嘗試更換驗證碼：

$(this).fadeOut(1000);/$(this).show();

在

$(this).addClass('hidden');/$(this).removeClass('hidden');

而如果它的幫助，然後用它:)

解決方案2

https://jsfiddle.net/Mastrix/kgjrum4L/

如果沒有那麼我們需要的，你撥弄鏈接

來源

2016-04-27 17:12:00

實時jQuery搜索問題 - 顯示問題

回答

相關問題