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

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'))
})

演示:小提琴