Skip to content


Subversion checkout URL

You can clone with
Download ZIP
jQuery plugin for displaying search results in a cool popup menu
Branch: master
Failed to load latest commit information.


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 section.

<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.