Jordan West

This is a Quicksilver style client side search for your website. The server specifies the list of pages to be searched on page load, then lets the browser do the searching. For a relatively small list of pages, this is much more responsive than using AJAX auto-complete.

It is designed for power users of your website to navigate faster. It is ideal for forum websites or similar, where users may want to quickly navigate to their profile, new messages, etc.

Demo

Press Esc to see it running on this page (unless you’re using Internet Explorer).

Compatibility

I haven’t attempted to make this compatible with Internet Explorer, so it is currently disabled in IE. I have not tested with Chrome, though it works on Firefox and Safari.

Obviously compatibility with IE would be the next step. Originally I was aiming this at power users who want to navigate websites quickly, most of whom use anything but IE.

Usage

Simply specify the list of sites to be searched on the

1
2
3
4
5
6
7
8
9
10
11
12

$(document).ready(function() {
  $().quicksearch({siteList:
    { "sites": [
      {title: "Google", keyword: "goog", url: "http://www.google.com/"},
      {title: "Yahoo", keyword: "yhoo", url: "http://www.yahoo.com/", suppressKeyword: true},
      {title: "Facebook", keyword: "fb", url: "http://www.facebook.com/"},
      {title: "Say hello", keyword: "hi",
        fn: function(val){
          alert("Hello! You typed '"+val+"' to get this box.");
        }}
    ]}, visible: false, newWindow: true});
});

Notes
Any of the options can be omitted. Defaults:

1
2
3
4
5
6
7
8
9

siteList: { sites: [] }, // This is a object containing a list of sites (can be retrieved via AJAX/JSON after initial load)
showOverlay: true,  // Show the curtain
invokeKey: 27, // Esc key
overlayID: 'qsOverlay',
searchBoxID: 'qsSearchBox',
visible: false,
newWindow: false,		// Open links in a new window (beware of popup blockers)
beforeShow: function(){},  // Called before the search box is shown
beforeHide: function(){}  // Called before the search box is hidden

If the user types the keyword of a site in full, the script will automatically navigate to that link – the user will not need to press enter. This does not happen if there are two sites with the same keyword, or if the ’suppressKeyword’ property is true for that site.

Download
Please note: This is only a prototype, something I hacked together in my spare time. As such, the code needs to be seriously cleaned up. Thus I am providing it only in a minified version for now. I will provide the source if anybody is interested.

Requires jQuery. Tested on v1.2.6 and v1.3.2. Simply include jQuery, the following two files, and a script similar to that under ‘Usage’ somewhere in your web page.
jquery.quicksearch.packed.js
quicksearch.css