jQuery Plugin For Searchable Select List Box - Searchit

jQuery Searchit is a simple yet user-friendly jQuery plugin that turns the default select option list into a searchable text box. The idea it to display all the matched select options in a dropdown list when you input in the text box.

How to use it:

1. Include jQuery library and jQuery Searchit on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="jquery.searchit.js"></script>

2. Create a html select box

<select id="demo">
  <option>jQueryScript.Net</option>
  <option>jQuery.Com</option>
  <option>jQuery</option>
  <option>jQuery Library</option>
  <option>jQuery UI</option>
  <option>jQuery Mobile</option>
  <option>jQuery Google CDN</option>
</select>

3. Call the plugin with options

<script>
$("select").searchit( { 
textFieldClass: 'searchbox', // Textbox class
dropDownClass: null,    // Dropdown class
size: 8,                 // Elements to show when typing
noElementText: "No elements found"  // "No elements found" text
} );
</script>

4. Style the text box with CSS

.searchbox {
    border:1px solid #456879;
    border-radius:6px;
    height: 22px;
    width: 200p;
    margin-top: 5px;
}

---

This awesome jQuery plugin is developed by fcipriani. For more Advanced Usages, please check the demo page or visit the official website.