Skip to content

HTTPS clone URL

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

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
demo
README.textile
jquery.searchlight.js
searchlight.css

README.textile

Search Light jQuery Plugin

Copyright 2009 Ryan Williams
http://ryanwilliams.org
searchlight@ryanwilliams.org

Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html

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">
    $('#searchfield').searchlight('do_search.php');
</script>

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

http://example.com/do_search.php?q=foobar

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.