Fork of a jQuery plugin that turns any textbox into a live search, or a “searchbox”.

- merged in Searchbox character option by mrcsparker
- merged in Add multi-instance support by frne
- added support for Mustache templates
- the element (dom_id) will be dynamically cleared if no results are found

$('input.search').searchbox()

That’s it, really. There are a few configuration options:

• url – search parameters will be appended to this url (default: ‘/search/’)
• dom_id – the element that gets updated with the results (default: ‘#results’)
• delay – the keystroke delay (default: 100 ms)
• loading_css – the css for an ajax spinner/loading bar (default: ‘#loading’)
• characters – minimum number of characters (default: 3)
• template – optional Mustache template

So, customizing each config option might look like this:

$('input.search').searchbox({
  url: '/live-search/',
  dom_id: '#thumbnails',
  delay: 250,
  loading_css: '#spinner',
  characters: 4,
  template: '#searchTemplate'
})

There are a few places you can hook into the plugin by binding a function to specific events. Here are the events:

• init.searchbox – triggered once when the plugin code executes
• before.searchbox – triggered right before the search is performed
• after.searchbox – triggered right after the search completes

Here’s an example of how to make use of them:

$(document).bind('init.searchbox', function() { ... })

A basic Mustache template:

<script id="searchTemplate" type="text/template">
  {{#results}}
    <a href="{{ url }}">{{ title }}</a>
  {{/results}}
</script>

Template id passed to the plugin:

<script type="text/javascript">
  $(document).ready(function () {
    $('#search form input').searchbox({
      template: '#searchTemplate'
    })
  });
</script>

Results must be returned as JSON from the server:

{"results": [
  {"url":"http://www.github.com","title":"GitHub"},
  {"url":"http://www.google.com","title":"Google"},
  {"url":"http://www.jquery.com","title":"jquery.com"}
]}

© 2009 Ryan Heath, released under the MIT license