Creating search bar

$(document).ready(function() { // My JavaScript code var input = document.getElementById('search-text'); input.addEventListener("keyup", function() { var searchTerm = input.value, listItem = document.getElementsByClassName('searchArray'); // JavaScript equivalent of jQuery's extend method function extend(a, b) { for (var key in b) if (b.hasOwnProperty(key)) a[key] = b[key]; return a; } }); // Bare minimum code from http://codepen.io/robooneus/pen/ivdFH //we want this function to fire whenever the user types in the search-box $("#search-text").keyup(function() { //first we create a variable for the value from the search-box var searchTerm = $("#search-text").val(); //then a variable for the list-items (to keep things clean) var listItem = $('#list').children('li'); //extends the default :contains functionality to be case insensitive //if you want case sensitive search, just remove this next chunk $.extend($.expr[':'], { 'containsi': function(elem, i, match, array) { return (elem.textContent || elem.innerText || '').toLowerCase() .indexOf((match[3] || "").toLowerCase()) >= 0; } }); //end of case insensitive chunk //this part is optional //here we are replacing the spaces with another :contains //what this does is to make the search less exact by searching all words and not full strings var searchSplit = searchTerm.replace(/ /g, "'):containsi('") //here is the meat. We are searching the list based on the search terms $("#list li").not(":containsi('" + searchSplit + "')").each(function(e) { //add a "hidden" class that will remove the item from the list $(this).addClass('hidden'); }); //this does the opposite -- brings items back into view $("#list li:containsi('" + searchSplit + "')").each(function(e) { //remove the hidden class (reintroduce the item to the list) $(this).removeClass('hidden'); }); }); });

.hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="search-text" placeholder="search"> <ul id="list"> <li class="searchArray">Apple pie</li> <li class="searchArray">Pumpkin pie</li> <li class="searchArray">Banana-creme pie</li> <li class="searchArray">Peach-blackberry cobbler</li> <li class="searchArray">Chocolate-strawberry torte</li> <li class="searchArray">Chocolate-zucchini cake</li> <li class="searchArray">Anything involving chocolate and mint</li> <li class="searchArray">Red-velvet cake</li> <li class="searchArray">Anything involving fruits that aren't cherries</li> </ul>