按输入框的jquery过滤复选框列表

Question

我有一个很长的复选框列表(同名).我想根据文本框中的输入创建一个过滤系统.我的意思是,当我在我的文本框中写"ter"时,我想只显示那些值匹配%tr%的chechbox(意味着在任何地方都有短语"ter").使用jquery实现这一目标的最佳方法是什么？我很抱歉,因为我对jquery很新.

<input type="checkbox" name="chk" id="chk1" value="casual">casual
<input type="checkbox" name="chk" id="chk2" value="intermediate">intermediate
<input type="checkbox" name="chk" id="chk3" value="hunter">hunter
<input type="checkbox" name="chk" id="chk4" value="forest">forest
<input type="checkbox" name="chk" id="chk5" value="term">extreme
<input type="checkbox" name="chk" id="chk6" value="river">river
<input type="checkbox" name="chk" id="chk7" value="beach">beach
<input type="text" id="chkfilter">

因此,每当我在文本框中写"ter"时,复选框2,3和5应该是可见的,其他应该隐藏/消失.怎么做？为每个单独的项目使用div？另外,如何使用jquery进行搜索以匹配%ter%

Answer 1

当您在文本框中键入内容时,选中复选框以查看该字符串是否存在于indexOf的值中,并根据该值设置显示属性(我使用了块,但内联对于复选框可能是正确的):

$('#chkfilter').on('keyup', function() {
    var query = this.value;

    $('[id^="chk"]').each(function(i, elem) {
          if (elem.value.indexOf(query) != -1) {
              elem.style.display = 'block';
          }else{
              elem.style.display = 'none';
          }
    });
});

复选框后面的文本不是复选框的一部分,不会被隐藏,要做到这一点你应该把它包装在一个标签中并做一些类似这样的JSBIN？