所以我有一组由 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>