Today I will just quickly show you how to add a search function to list in jQuery Mobile. The process is quick and easy but this is just for a simple search function.

jQuery Mobile: Adding Search to a List

First off we need to start with our list that we want our users to be able to search. The app I am working on is a cocktail app  so I am going to use a sample list from that.

<ul data-role="listview">
 <a href="#Apple_Martini" data-role="button" data-theme="d" >Apple Martini</a>
 <a href="#Bellini" data-role="button" data-theme="d" >Bellini</a>
 <a href="#Ciapiranha" data-role="button" data-theme="d" >Ciapiranha</a>
 <a href="#Cosmopolitan" data-role="button" data-theme="d" >Cosmopolitan</a>
 <a href="#Kir_Royale" data-role="button" data-theme="d" >Kir Royale</a>
 <a href="#Long_Island_Iced_Tea" data-role="button" data-theme="d" >Long Island Iced Tea</a>
 <a href="#Margarita" data-role="button" data-theme="d" >Margarita</a>
 <a href="#Mimosa" data-role="button" data-theme="d" >Mimosa</a>
 <a href="#Mint_Julep" data-role="button" data-theme="d" >Mint Julep</a>
 <a href="#Mojito" data-role="button" data-theme="d" >Mojito</a>
</ul>

Adding a data filter to our list view will add a search function to the list.

<ul data-role="listview" data-filter="true">
  <a href="#Apple_Martini" data-role="button" data-theme="d" >Apple Martini</a>
  <a href="#Bellini" data-role="button" data-theme="d" >Bellini</a>
  <a href="#Ciapiranha" data-role="button" data-theme="d" >Ciapiranha</a>
  <a href="#Cosmopolitan" data-role="button" data-theme="d" >Cosmopolitan</a>
  <a href="#Kir_Royale" data-role="button" data-theme="d" >Kir Royale</a>
  <a href="#Long_Island_Iced_Tea" data-role="button" data-theme="d" >Long Island Iced Tea</a>
  <a href="#Margarita" data-role="button" data-theme="d" >Margarita</a>
  <a href="#Mimosa" data-role="button" data-theme="d" >Mimosa</a>
  <a href="#Mint_Julep" data-role="button" data-theme="d" >Mint Julep</a>
  <a href="#Mojito" data-role="button" data-theme="d" >Mojito</a>
</ul>

Very simple method of adding a search function to your lists.