Question

我有列表和网格视图以及一个输入框，您可以在其中搜索li元素。搜索在两个视图上都可以正常工作。但是，如果在一个视图上搜索然后切换到另一个视图，则会更改li元素的宽度并显示不正确。

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：实时搜索

$(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);


    });
});

感谢您的帮助！

Answer 1

当元素采取＆＃34; initial＆＃34;显示属性的值根据CSS规范（仅当你没有设置它时）。

所以 fadeOut＆amp; show 将display属性设置为内联css，并覆盖你的css。

解决方案1 

尝试替换此代码：

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

在

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

如果它有帮助，那么使用它：）

解决方案2

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

如果不是，那么我们需要，你的小提琴链接

实时jQuery搜索问题 - 显示问题

1 个答案: