Question

我正在尝试使用js构建实时搜索功能。我有一个从头开始构建的基本博客，我想实现搜索功能。我使用php从数据库中获取帖子:(数据库查询在这里不重要，我只想告诉你我如何显示我的帖子）

echo '<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 postCol">';
    echo '<li class="list">';
    echo '<h1 class="titles"><a href="viewpost.php?id='.$row['postID'].'">'.$row['postTitle'].'</a></h1>';
    echo '<p>Posted on '.date('jS M Y', strtotime($row['postDate'])).' by '.'<span class="author-name">'.$row1['username'].'</span>'.'</p>';
    echo '<p>'.$row['postDesc'].'</p>';
    echo '<div class="imgT">';
        echo '<img class="img-responsive" src="'.$row2['imgLoc'].'"'.'/>';
    echo '</div>';         
    echo '<div class="read-more"><a href="viewpost.php?id='.$row['postID'].'">Read More >></a></div>'; 
    echo '</li>';
echo '</div>';

所以，我想搜索每个帖子的标题并查看是否有匹配，如果有，我想显示该特定帖子并隐藏其余部分。我在互联网上找到了这个js脚本，我试图修改它，但我无法弄明白。

<script>
    $(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
            $(".titles a").each(function(){

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

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

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

我知道如果我每次找到比赛时都这样做，它会隐藏所有这些不是我想要的但我不知道怎么做。谢谢你的帮助！

Answer 1

您需要.list提及element中$.each的当前// Loop through the comment list $(".titles a").each(function() { var listParent=$(this).closest('li.list'); //get the closest parent with class .list // If the list item does not contain the text phrase fade it out if ($(this).text().search(new RegExp(filter, "i")) < 0) { listParent.hide(); //hide the proper parent // Show the list item if the phrase matches and increase the count by 1 } else { listParent.show(); //show the proper parent count++; } });。以下是您可能想做的可能变化。

>>> import re
>>> p = re.compile('\w+|\W')
>>> p.findall('\n\n\nmy  string \n')

['\n', '\n', '\n', 'my', ' ', ' ', 'string', ' ', '\n']

在实时搜索中显示/隐藏列表元素

1 个答案: