javascript - 使用jQuery搜索元素属性值

Question

我试图通过隐藏不符合要求的内容来在屏幕上制作过滤器。

这是我到目前为止想出的。我不确定我做错了什么

查询：

jQuery('#searchBox').on('keyup change', function() {
    var search = $('#searchBox').val();


    //for each h4       
    $('h4').each(function(){
     var h4id = $(this).attr('id');
        if ($(h4id).contains(search))
            $(this).show();
         else
            $(this).hide
    });

HTML：

<input type="search" name="search" id="searchBox"/>

<h4 id="Adminstrator">Administrator</h4> 
<h4 id="John,Smith">John Smith</h4> 
<h4 id="Jane,Smith">Jane Smith</h4>  

（我使用的是 JQuery 1.9.1）（所以，如果我开始输入 Smith，“Administrator”h4 应该会消失。

Answer 1

试试这个： - 简单的一个，但区分大小写

演示

  jQuery('#searchBox').on('keyup change', function() {
         var search = $('#searchBox').val();
      $('h4').hide();
      $('h4[id*='+ search + ']').show();

    });

看看这是否有帮助。我不会使用 id 来存储字符串比较，因为多个人的名称可能相同，并且您最终可能会拥有多个具有相同 id 的 h4。所以我在这里使用数据属性和 jquery 数据。

演示

 jQuery('#searchBox').on('keyup change', function() {
         var search = $('#searchBox').val();
      $('h4').hide().filter(function(_,oj){
       return $(oj).data('key').toLowerCase().indexOf(search.toLowerCase()) > -1;
     //if your are trying to match the text() then do  
     //return $(oj).text().toLowerCase().indexOf(search.toLowerCase()) > -1;
      }).show();
     });

修复您的代码将意味着这一点。没有contains功能和其他几个错别字。

演示

jQuery('#searchBox').on('keyup change', function() {
    var search = $('#searchBox').val();
  //for each h4       
    $('h4').each(function(){
     var h4id = this.id;

        if (h4id.indexOf(search) > -1)
        //if your are trying to match the text() then do  
        //if ($('#'+h4id).text().indexOf(search) > -1)
            $(this).show();
         else
            $(this).hide();
    });
});

Answer 2

.contains 不会给你选择器的文本内容。它只会搜索选择器内的元素。

试试这种方法..这可以更优化

jQuery('#searchBox').on('keyup change', function () {
    var search = $('#searchBox').val().toLowerCase();

    $('h4').hide();
    $('h4').each(function () {
        var h4id = $(this).attr('id'),
            $text = $('#'+ h4id).text().toLowerCase();
        if($text.indexOf(search) > -1) 
            $(this).show();
    });

}); 

确保您的id是唯一的。

接下来是您的 id 不应包含,在其中

JSFIDDLE

Answer 3

尝试基于正则表达式的解决方案

jQuery('#searchBox').on('keyup change', function() {
    var search = $(this).val();
    var regex = new RegExp(search, 'i');

    //for each h4       
    $('h4').hide().filter(function(){
        return regex.test(this.id)
    }).show();
});

演示：小提琴

Answer 4

只需使用 jQuery 属性选择器，请参见此处，只需两行代码就足够了。演示：

//for each h4       
var h4id = $(this).attr('id');
$("h4").hide().filter("[id*=" + h4id + "]").show();