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 :

<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
   <li>Water</li>
   <li>Juice</li>
</ul> 

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

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 :

<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
   <li>Water</li>
   <li>Juice</li>
</ul> 

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

• javascript
• jquery

6 Answers 6

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />
<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
   <li>Water</li>
   <li>Juice</li>
</ul>

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(';');
  $('div label').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);
  });
});

div label {
  display: none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />
<div>
    <label>
      <input class="appFilterCheckbox" id="appFilterCheckbox" type="checkbox" value="Coffee" />Coffee</label>
    <br/>
    <label>
      <input class="appFilterCheckbox" id="appFilterCheckbox" type="checkbox" value="Tea" />Tea</label>
    <br/>
    <label>
      <input class="appFilterCheckbox" id="appFilterCheckbox" type="checkbox" value="Milk" />Milk</label>
    <br/>
    <label>
      <input class="appFilterCheckbox" id="appFilterCheckbox" type="checkbox" value="Water" />Water</label>
    <br/>
    <label>
      <input class="appFilterCheckbox" id="appFilterCheckbox" type="checkbox" value="Juice" />Juice</label>
</div>

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./foqagadewo/edit?html,js,output

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

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

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

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

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" onchange="filterItems(this);" />
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
  <li>Juice</li>
</ul>

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
 
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>


<select id="searchBox" data-placeholder="Type &apos;C&apos; to view" style="width:350px;" multiple class="chosen-select chosen-select-no-results" tabindex="11">
            <option value=""></option>
            <option>Coffee</option>
            <option>Tea</option>
            <option>Milk</option>
            <option>Water</option>
            <option>Juice</option>
          </select>