How to search/filter list by multiple items?

How to search/filter list by multiple items?

I'm looking for an example or maybe a little hint for a method to filter/search list of items by multiple items typed into textbox.

Let's assume that I have a list :

     
Coffee
     
Tea
     
Milk
     
Water
     
Juice
  
   

What I want is to type (in textbox) for instance : Milk;Water;Juice (with semicolon between), which returns three items.

$('li').filter(function() {       ????  })  

It could be a filter or another jquery/js function.

thank you in advance for any help

EDIT :

I forget to tell that it should search by a part of last item. For instance Coffe;Te --> return Coffe and Tea

Answer by Kaippally for How to search/filter list by multiple items?

You may have to modify Jquery autocomplete to do this for you https://jqueryui.com/autocomplete/

You could also create a HTML select element with 'multiple' attribute and push the input strings into an array and then select the items in the select > option elements

Answer by Zain Shaikh for How to search/filter list by multiple items?

Try this code:

$('input').on('keyup', function(){    var val = $(this).val().toLowerCase();      $('li').each(function() {      var $this = $(this);      var text = $this.text().toLowerCase();      if ( val.indexOf(text) > -1 ) {        $this.show();      } else {        $this.hide();      }    });  });  

DEMO: http://jsbin.com/foqagadewo/edit?html,js,output

Answer by BG101 for How to search/filter list by multiple items?

This is one way you can achieve this:-

$('input').keyup(function(){     var search = this.value.split(';');     $('ul li').each(function(index, element){        $(element).toggle(search.indexOf($(element).text()) >= 0);     });  });

      
     
Coffee
     
Tea
     
Milk
     
Water
     
Juice
  

Split the search input on ; and check the text of each li to see if it is in the array.

Update

Ignore case and part match

$('input').keyup(function() {    var search = this.value.split(';');    $('ul li').each(function(index, element) {      var text = $(element).text().toLowerCase();      var show = search.filter(function(e) {        return e != '' && text.indexOf(e.toLowerCase()) >= 0;      }).length > 0;      $(element).toggle(show);    });  });

ul li {    display: none;  }

      
    
              Coffee    
    
              Tea    
    
              Milk    
    
              Water    
    
              Juice    
  

Answer by Sundar Singh for How to search/filter list by multiple items?

You can use , this will return li's that are matched.

var items= textboxValue.split(";")  var a= $('ul li').filter(function() {     return items.indexOf($(this).text()) > -1 ;  });  

Answer by Parth Trivedi for How to search/filter list by multiple items?

Please check Documentation

//bind chosen  $(".chosen-select").chosen({no_results_text: "Oops, nothing found!"});      $('.chosen-select').on('change', function(evt, params) {      alert($(".chosen-select").val());    });

                                         Coffee              Tea              Milk              Water              Juice            

Answer by Ankit Kathiriya for How to search/filter list by multiple items?

You Should Try This. please run my snippet and Enter that you want to display.

$(document).ready(function() {  });    function filterItems(thisobj) {    $("ul li").hide();    $("ul li").filter(function(i) {      return ($(thisobj).val().split(';').indexOf($(this).text())> -1);    }).show();  }

    
    
Coffee
    
Tea
    
Milk
    
Water
    
Juice
  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72