Question

我有一个搜索框和一个div列表，在我的项目中使用ajax填充数据库。我的第一个计划是聚焦/突出显示并滚动特定结果。但我很难做到这一点。现在，我想过滤搜索结果并隐藏其他不兼容的结果。

enter code here

希望能帮助我解决这个问题。谢谢，祝你有愉快的一天！

Answer 1

尝试在此上下文中使用:contains()选择器来简化您的工作，

$(function () {
    $('.search-field').on('keyup blur change', function () {
        $("li").removeClass("highlight");
        $('li:contains(' + this.value + ')').addClass('highlight');
    });
});

旁注：:contains()选择器区分大小写。

DEMO

要隐藏不必要的结果，请使用此http://jsfiddle.net/vEACM/8/

Answer 2

$(function() {
    $('.search-field').on('keyup blur change', function() {
        var text_s = $(this).val();
        $("li").removeClass("highlight");
        if (text_s.length > 0){
            $("li").each(function(){
                var li_value = $(this).text();
                if (li_value.indexOf(text_s) >= 0){
                    $(this).addClass("highlight");
                     $(this).show();
                }
                else{
                    $(this).hide();
                }
            });
        }
    });
});

演示：

http://jsfiddle.net/Cw4g2/

如何使用搜索过滤数据并在jquery中隐藏不兼容的结果

2 个答案:

DEMO