How to Perform a Simple Live Search Using jQuery? – Code Snippet #31

25 Mar , 2016  Code Snippets,jQuery 

Code Snippet #31: The simple code that performs a live search on a set of words within an HTML element using jQuery. Shows the matching list of texts as you type the search term dynamically.

Live Search Using jQuery

Today, we will learn a simple code to:

  1. Create an input search box
  2. Create an element containing the list of words to search
  3. Search or find the words searched using jQuery dynamically

DEMO: Type the countries in the search box for live searching functionality

HTML:

jQuery:

Explanation:

The HTML is self-explanatory. There is a div element with id “example” where all the search words are placed. A search input box is created with id “search”, where search terms will be entered. In jQuery we are using the keyup function to check for any key-stroke events on the search input box. Initially we get the key which was pressed, then we get the value that was entered. Next, we hide all the words and display only the terms matched. To display the terms matched, we use another function to perform which is named as “Contains” which checks whether any text was matched using the indexOf function provided by jQuery.



, ,

Comments are closed.