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.

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
– Sandeep sandy, Commented Aug 22, 2016 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
– Sandeep sandy, Commented Aug 22, 2016 at 11:39

Anthony · Accepted Answer · 2020-09-12 19:48:05Z

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, 2020 at 19:48

Anthony

14.5k14 gold badges66 silver badges87 bronze badges

answered Aug 22, 2016 at 11:10

Quentin Roger

6,5482 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sandeep sandy Over a year ago

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.

Quentin Roger Over a year ago

Happy to help, and welcome to SO. If this answer or any other one solved your issue, please mark it as accepted.

Anthony Over a year ago

The syntax is different for JQuery 3

Srikrushna · Accepted Answer · 2018-06-29 21:02:49Z

       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.

Collectives™ on Stack Overflow

How to use Jquery filter?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related