How to use Jquery filter?

Question

html:

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

I have the above code, i would like to filter the elements in searchElemDiv added by java script.

I tried as below, but getting failed to capture the elements which were filtered by filter in array.

  $('#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>');
            }
      });

When I give a first key it is removing all the elements from searchElemDiv div, and when delete entire input from input box again searchElemDiv is filled with all the elements as page loads but in between single character also not working.

Can you please help me how to figure it out.

Answer 1

The callback for filter return three parameters :

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

Take a look here :

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

A little example :

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>

Answer 2

       Ex:
       <ul>
            <li>City 1</li>
            <li>City 2</li>|
            <li>City 3</li>
            <li>City 4</li>
            <li>City 5</li>
        </ul>
a.  .eq(): Get DOM element from specified index. The indexes start from 0
    Ex: $('li').eq(2).css('background-color', 'red');

b.  .first():Gets the first DOM element
    Ex: $('li').first().css('background-color', 'red'); // first index = 0

c.  .last(): Gets the last DOM element
    Ex: $('li').last().css('background-color', 'red'); // first index = 0

d.  .filter():You can filter elements by selecter or by index
    Ex: $('li').filter(':odd').css('background-color', 'red'); //index start from 1.

    //If you want to make the first and fourth elements have a red background then your script would be
   //index start from 0.
        $('li').filter(function(index){
        if(index == 1 || index == 4)
        {
            $(this).css('background-color', 'red');
        }
        });

e.  .has():If you want to check for some condition then the .has() function can be used.
    Ex: $('li').has('a').css('background-color', 'red'); //Check the <a> tag

f.  .not():  If you want to make all the odd items red then your script would look like:
    Ex: $('li').not(':even').css('background-color', 'red'); //index start from 0.