rpheath/searchbox

A live search plugin for jQuery.

Searchbox

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

Usage

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

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: ‘#results’)
• delay – the keystroke delay (default: 100 ms)
• loading_css – the css for an ajax spinner/loading bar (default: ‘#loading’)

So, customizing each config option might look like this:

$('input.search').searchbox({
  url: '/your/search/url',
  param: 'q',
  dom_id: '#thumbnails',
  delay: 250,
  loading_css: '#spinner'
})

Hooks

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() { ... })

License

© 2009 Ryan Heath, released under the MIT license

searchbox's Issues

Multiple searchboxes causing issues

I have been able to get an individual search box to work without failm but when I add more than one, Example:
$('input.searchcontacts').searchbox({
url: '/contacts/load_contacts/',
param: 'searchcontacts',
dom_id: '#contactresults',
delay: 250
});
$('input.searchattendees').searchbox({
url: '/events/load_attendees/',
param: 'searchattendees',
dom_id: '#attendeeresults',
delay: 250
});
$('input.searchrecipients').searchbox({
url: '/mailers/load_recipients/',
param: 'searchrecipients',
dom_id: '#recipientresults',
delay: 250
});

Then it appears it reads the last parameters every time searchbox is called. Am I missing something?

Thanks,
Gregg