Searchbox

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

Thank Ryan Heath for his contributing. I edited this plugin to use for multiple textbox and add callbacks. I also renamed it to “hsearchbox” to discern difference between the two plugins.

Usage

$('input.search').hsearchbox()

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

• url – a GET request is sent to this url (default: ‘/search’)
• param – the actually parameter that gets sent to the server (default: ‘query’)
• dom_id – the element that gets updated with the results (default: ‘#livesearch_results’)
• delay – the keystroke delay (default: 250 ms)
• minChars – the minimum characters to process (default: 2)
• loading_css – the css for an ajax spinner/loading bar (default: ‘#livesearch_loading’)
• del_id – the element optional (default: ‘#livesearch_del’)
• form_id – the element for search form (default: ‘#livesearch_form’)
• dataType – the datatype for an ajax request (default: ‘text’)
• onInitSearch – the callback when init searchbox
• onStartSearch – the callback when start search
• onFinishSearch – the callback when finish search

So, customizing each config option might look like this:

$('input.search').hsearchbox({
  url: '/your/search/url',
  param: 'search',
  dom_id: '#search_results',
  loading_css: '#livesearch_loading'
})

Or using with a form:

$('#search-input').hsearchbox({
  url: $('#search_form').attr('action'),
  param: 'search',
  dom_id: '#search_results',
  delay: 100,
  minChars: 3,
  loading_css: '#livesearch_loading',
  form_id: '#search_form'
})

Hooks

There are a few callback you can use:

• onInitSearch – triggered once when the searchbox init
• onStartSearch – triggered right before the search is performed
• onFinishSearch – triggered right after the search completes

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

$('#search-input').hsearchbox({
  url: '/your/search/url',
  param: 'search',
  dom_id: '#search_results',
  ...,
  onInitSearch: function(){
    // your code here
  },
  onStartSearch: function(){
    // your code here
  },
  onFinishSearch: function(){
    // your code here
  }
})

License

© 2009 Ryan Heath, released under the MIT license, edited by Hoang Mirs