Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
jQuery plugin for displaying search results in a cool popup menu
branch: master
Failed to load latest commit information.
demo Initial commit
README.textile Initial commit
jquery.searchlight.js Fixed right alignment and word wrapping in IE7
searchlight.css Tweaked CSS


Search Light jQuery Plugin

Copyright 2009 Ryan Williams

Dual licensed under the MIT and GPL licenses:

Please see the file “demo/demo.html” to view a working example.

Search Light is a jQuery plugin which displays search results in an easy to
navigate menu. It’s simple to setup. Simply include the JavaScript and CSS
files in your

<link rel="stylesheet" href="searchlight.css">
<script type="text/javascript" src="jquery.searchlight.js"></script>

Then activate the plugin on any text field which will be used for searching.

<input type="text" id="searchfield" />
<script type="text/javascript">

The term entered into the text field will be sent to the script using a GET request with the argument named “q” like:

Your script “do_search.php” must return some JSON structured like this example (indentation and whitespace is optional):

    {'title':'Heavy Metal', 'results': [
        ['/metal/1', 'Disturbed - The Game', 'icons/metal.png'],
        ['/metal/2', 'Marilyn Manson - The Beautiful People', 'icons/metal.png'],
        ['/metal/3', 'Soil - 2 Skins', 'icons/metal.png'],
        ['/metal/4', 'Alestorm - Wenches & Mead', 'icons/metal.png']
    {'title':'Pop', 'results':[
        ['/pop/1', 'Michael Jackson - Bad', 'icons/pop.png'],
        ['/pop/2', 'Britney Spears - If U Seek Amy', 'icons/pop.png'],
        ['/pop/3', 'Take That - Relight My Fire', 'icons/pop.png'],
        ['/pop/4', 'Rick Astley - Never Gonna Give You Up', 'icons/pop.png']
    {'title':'Folk', 'results':[
        ['/folk/1', 'The Proclaimers - I\'m Gonna Be', 'icons/folk.png'],
        ['/folk/2', 'Bob Dylan - Hurricane', 'icons/folk.png'],
        ['/folk/3', 'Jason Mraz - Geek In The Pink', 'icons/folk.png'],
        ['/folk/4', 'Beirut - Nantes', 'icons/folk.png']
Something went wrong with that request. Please try again.