How to search / filter a list by several items?

Question

I am looking for an example or maybe a small hint on the filtering / searching method for a list of elements with several elements entered in a text field.

Suppose I have a list:

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

I want to print (in a text box), for example: Milk; Water; Juice (with a semicolon), which returns three elements.

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

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

in advance for any help

EDIT:

I forgot to say that he should look for part of the last element. For example Coffe; Te → Return Coffe and Tea

Answer 1

This can be done like 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.com/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>

Run codeHide result

; li, , .

$('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.com/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>

Hide result

Answer 2

:

$('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 3

, Jquery, https://jqueryui.com/autocomplete/

HTML 'multiple' , a >

Answer 4

, li, .

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

Answer 5

,

//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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://harvesthq.imtqy.com/chosen/chosen.css">
 
<script src="http://harvesthq.imtqy.com/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>

Hide result

Answer 6

. , .

$(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.com/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>

Hide result