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.

http://stackoverflow.com/a/14274386/3986045 I followed the above answer to implement search in selectbox. And trying to implement it for search in div elements. — Sandeep sandy, Aug 22 '16 at 11:18
Thanks guys for helping me. I changed the above code as var opt = checkBoxVals.filter(function(element, index) { return val === '' || element.indexOf(val) == 0; }); now it is working fine. Thanks @Quentin Roger. — Sandeep sandy, Aug 22 '16 at 11:39

score 1 · Accepted Answer · edited Sep 12 '20 at 19:48

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>

edited Sep 12 '20 at 19:48

Anthony

13,434
14
60
80

answered Aug 22 '16 at 11:10

Quentin Roger

6,410
2
23
36

Thanks, I think i used interchangebly the index and element. I modified like var opt = checkBoxVals.filter(function(idx, el) { return val === '' || idx.indexOf(val) == 0; }); Now it is working fine. – Sandeep sandy Aug 22 '16 at 11:35
Happy to help, and welcome to SO. If this answer or any other one solved your issue, please mark it as accepted. – Quentin Roger Aug 22 '16 at 11:38
The syntax is different for JQuery 3 – Anthony Sep 12 '20 at 19:50

score 0 · Answer 2 · answered Jun 29 '18 at 21:02

       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.

How to use Jquery filter?

2 Answers2