Question

我有这个城市列表（复选框和标签）和一个输入字段：

<input class="search-filter" type="text"/>
<form autocomplete="off" id="city-search-form" name="city-search-form" action="" method="">
   <div id="list" class="multiselect">
      <input id="city-id-1" class="css-checkbox" type="checkbox" />
      <label for="city-id-1" name="" class="css-label">abc</label>

      <input id="city-id-2" class="css-checkbox" type="checkbox" />
      <label for="city-id-2" name="" class="css-label">bce</label>

      <input id="city-id-3" class="css-checkbox" type="checkbox" />
      <label for="city-id-3" name="" class="css-label">cde</label>

      <input id="city-id-4" class="css-checkbox" type="checkbox" />
      <label for="city-id-4" name="" class="css-label">rgp</label>
   </div>
</form>

我正在使用此jquery代码通过我输入的单词过滤复选框+标签，但代码不起作用。如何过滤并仅显示以键入的单词开头的标签。

function listFilter(list) {
    var input = $('.search-filter');

    $(input)
    .change( function () {

        var filter = input.val();

        $('.css-label').filter(function(filter) {

            if($('.css-label').text().search(filter) == 0){
                .....hide();
            }
            else {
              .......show();
            }
        });
      })
    .keyup(function () {
        input.change();
        .....
        } 

    });
  }
  $(function () {
    listFilter($("#list"));
  });
}($));

Answer 1

尝试

function listFilter(list, input) {
    var $lbs = list.find('.css-label');

    function filter(){
        var regex = new RegExp('\\b' + this.value);
        var $els = $lbs.filter(function(){
            return regex.test($(this).text());
        });
        $lbs.not($els).hide().prev().hide();
        $els.show().prev().show();
    };

    input.keyup(filter).change(filter)
}

jQuery(function($){
    listFilter($('#list'), $('.search-filter'))
})

演示：Fiddle

Answer 2

您可以使用:contains()选择器进行过滤：

var input = $('.search-filter');
input.change( function () {
        var filter = input.val();
        if(filter.length == 0) { // show all if filter is empty
           $('.css-label').each(function() {
             $(this).show();   
             $(this).prev().show();
           });
           return;
        }

        // hide all labels with checkboxes
         $('.css-label').each(function() {
             $(this).hide();   
             $(this).prev().hide();
         }); 

        // show only matched
        $('.css-label:contains("'+filter+'")').each(function() {
            $(this).show();   
            $(this).prev().show();
        });
}).keyup(function() {
    $(this).change();    
});

jsfiddle

Answer 3

接受正确的时间太晚了，但这是我在工作开始之前正在努力的尝试。以为我也可以发布它。

它不区分大小写并且支持多个单词（感谢Arun P Johny）。

demo

$('.search-filter').keyup(function (e) {
    var text = $(this).val();
    var $elems = $('.css-label, .css-checkbox');

    if (text.length < 1) {
      $elems.show();
    }
    else{
        $elems.hide();    
        var sel = $('label').filter(function () {
           return $(this).text().match("\\b", "i" + text)
        }).attr('for');

        $('#'+sel + ',[for=' + sel + ']').show();                             
    }
});

Answer 4

我在下面有一个代码来获取标签名称

<!DOCTYPE html>
<html>
<head>

<SCRIPT src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</SCRIPT>

<SCRIPT>
$(document).ready(function(){

alert($(".css-label").text());
});
</SCRIPT>

</head>
<body>
<div id="list" class="multiselect">
      <input id="city-id-1" class="css-checkbox" type="checkbox" />
      <label for="city-id-1" name="" class="css-label">abc</label>
</div>
</body>
</html>

希望这会对你有所帮助

JQuery - 过滤以文本键入的标签

4 个答案: