How to Filter an HTML List using Search Input with jQuery

Today I am going to write a tutorial about how to search and filter an HTML UL li list using a search input box. Sometimes we have a big unsorted list and it takes lot of time to find exactly what we want,  so we can make it easy for user to just search & filter the list. This all is done using a small jQuery function. Lets move on to the solution.

 

How to Filter an HTML list

HTML List

Here is an HTML list of famous cities of the world.

So here is a list. Now we can use jQuery to sort this list using an HTML input box. You can create list yourself and list can be as long as you want.

jQuery

This jQuery snippet will do all the searching.

This jQuery code will perform a search triggered by a key-up event on famousCities list and will show only items which match with words you entered.

Complete Code

Here is the complete working code that will perform the search.

Filter html list jquery
Filter html list jquery
filter-html-list-jquery.html
1.3 KiB
8 Downloads
Details

One Reply to “How to Filter an HTML List using Search Input with jQuery”

  1. Ramesh says:

    If suppose i have ul inside li, the search is not working for me. Please check the below example when i try to find KA its not showing for me 🙁

    India
    KA </ul

    Amsterdam
    Karachi
    Ankara
    Baltimore
    Beijing
    Berlin
    Brussels
    London
    Cairo

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

scroll to top