0

所以我有一组由 wordpress 插件生成的动态创建的内容“框”。每个框都包含在一个具有“front-page-post”类的 div 中。我正在尝试创建一个“实时搜索”，它将删除不匹配的框，但也会在用户更改或删除他们的搜索词时将它们添加回来。

使用 $(this).fadeOut(); 和 $(this).fadeIn(); 有效，但是因为这些框实际上并没有被删除 - 只是隐藏了 - 页面布局不会动态更新，并且这些框保持在原来的位置。如果我使用 $(this).remove(); 完全删除框，我可以更新页面布局；但如果搜索词更新，不知道如何重新添加它们。尝试将它们存储在具有“商店”类的页面上的隐藏 div 中，但这也不起作用。

我正在处理的页面在这里。这是我的代码；任何帮助，将不胜感激！谢谢！

<script type="text/javascript">

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

    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(), count = 0;
    // Loop through the comment list
    $(".front-page-post").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).clone().appendTo("div.store");
            $(this).remove().delay(500); $(window).resize();
        // Show the list item if the phrase matches and increase the count by 1

        } else {

          $(this).prepend( function() { $("div.store").contents(); } );

            count++;
        }
    });

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

</script>
4

2 回答 2

0

看起来该站点已使用 positin:absolute 和 top, left 定位块，这意味着您必须重新计算这些块，即使您删除了这些框。

于 2013-10-30T17:28:05.243 回答
0

我花了一段时间才弄清楚，但这似乎在我的浏览器上运行良好。

第一行只是禁用了您的功能，因此我可以在控制台中尝试它，您不需要它。

工作 pastebin 样本

于 2013-10-30T21:27:23.013 回答