2016-08-22 85 views
2

HTML:如何使用Jquery过滤器?

<div class="searchChkBoxDiv"><input id="searchchk_input"></div> 
<div class="searchElemDiv"></div> 

JS:

var checkBoxVals = ["sandeep", "suresh", "rajesh", "ramesh", "pad"]; 
for(var i = 0; i<checkBoxVals.length; i++){ 
      $('.searchElemDiv').append('<div id='+checkBoxVals[i]+'><input type="checkbox"><span>'+checkBoxVals[i]+'</span></div>'); 
      } 

我有上述代码中,我想以过滤由Java脚本加入searchElemDiv的元素。

我尝试如下,但未能捕获过滤器数组中的元素。

$('#searchchk_input').keyup(function(){ 
     var val = $(this).val(); 
     $('.searchElemDiv').empty(); 
     var opt = checkBoxVals.filter(function(idx, el) { 
      return val === '' || el.indexOf(val) == 0; 
      }); 
     for(var i=0; i<opt.length; i++){ 
      $('.searchElemDiv').append('<div id='+opt[i]+'><input type="checkbox"><span>'+opt[i]+'</span></div>'); 
      } 
     }); 

当我把它从searchElemDiv DIV移除所有元素的第一关键,当删除输入框中再次searchElemDiv充满了所有的元素,页面加载,但在单个字符之间的整个输入也不能正常工作。

你能帮我解决一下吗?

+0

'checkBoxVals'不是'jQuery-object' – Rayon

+0

http://stackoverflow.com/a/14274386/3986045 我跟着上面的答案在选择框中实现搜索。 并试图在div元素中执行搜索。 –

+0

谢谢你们帮助我。 我改变上面的代码作为 VAR选择= checkBoxVals.filter(功能(元件,索引){ \t返回VAL === '' || element.indexOf(VAL)== 0; }); 现在它工作正常。 谢谢@Quentin罗杰。 –

回答

0

的回调过滤器返回三个参数:

// the first is for the value the second for the index 
function callbackfn(value, index, array1) 

到这里看看:

https://msdn.microsoft.com/en-us/library/ff679973(v=vs.94).aspx

一个小例子:

var checkBoxVals = ["sandeep", "suresh", "rajesh", "ramesh", "pad"]; 
 

 
var opt = checkBoxVals.filter(function(el, idx, array) { 
 
    console.log("index :"+idx); 
 
    console.log("element :"+el); 
 
    console.log("the full array :"+array); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

+0

谢谢,我想我互换地使用了索引和元素。 我改性等 \t \t \t变种选择= checkBoxVals.filter(功能(IDX,EL){ \t \t \t \t返回VAL === '' || idx.indexOf(VAL)== 0; \t \t \t \t}); 现在它工作正常。 –

+0

乐于助人,欢迎来到SO。如果此答案或任何其他人解决了您的问题,请将其标记为已接受。 –