Searchbox: jQuery live search plugin

Ah, the infamous live search. Often overused, but handy nonetheless. A project I’m currently working on has several places where a live search is exactly the right solution. I looked into the existing options, but wasn’t quite satisfied with the implementations. Since it’s an easy enough thing to do, I wrote a plugin for it. It’s called searchbox and can be found on github.

Usage

In it’s basic form (if you’re happy with the default configuration):

1

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

Or you can configure a few things:

1
2
3
4
5
6
7

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

See the implementation (or the README) for the defaults.

Hooks

There are currently three places you can hook into the plugin.

1. initialization: init.searchbox
2. before the search is submitted: before.searchbox
3. after the search is completed: after.searchbox

These events get triggered at the right time and place within the plugin, and don’t do anything by default. But if you need to execute some special code in one of those three situations, you just have to bind a function to any one of those events. For example, to execute some code after the search:

1
2
3

$(document).bind('after.searchbox', function() {
  $('a[rel=facebox]').unbind('click').facebox()
})

Feel free to fork and improve.