Glossy Search is a JavaScript+CSS solution for creating an auto-complete/suggest search on your site. The example code shown below is taken straight from the site navigation code for Globalisk.com (the search in the upper right corner). It is the result of work I did for my father on his Glossary of International Economics, and it inspired me to turn the rest of my own site navigation into reusable scripts.

How to use

Place the JavaScript and CSS code somewhere on your site, and then reference them in the header of your documents as follows:

In your own site navigation JavaScript file (which you should reference after the Glossy code in the header of your documents), you can populate your search index with keyword terms and their corresponding links as follows:

In your site pages, place the search rendering code wherever you want the search box to appear:

Customizing the search

You can redefine any/all styles as defined in the CSS file (it is recommended that you override them with your own stylesheets rather than alter the default styles in the source).

You can also assign your own values to several JavaScript variables:

Var (prefix with glossySearch.)	Default	Description
localSiteBase	""	Set to a local reference such as "file:///C:/Users/Ryan/Desktop/Globalisk/"
clipTerms	undefined	Set this to a maximum string length for terms ("..." appended)
highlightColor	"black"	Highlight color for a selected item/link
highlightBackgroundColor	"#ffff00"	Highlight background color for a selected item/link
resultsPrefix	"Suggestions..."	Set this to your own results prefix, or empty string ("")
zeroResultsBlurb	"No pages found."	Set this to your own "0 results" blurb, or empty string ("") to suppress the blurb altogether
glossyLinksPrefix	""	Prefix pre-pended to results links (can be set to, for example, "../" when sub-folder references come into play)
MATCH_LOOSE_MAX	400	Once this many results have accumulated, "loose" matching shuts off (otherwise it can become a memory hog and crash a browser)
MATCH_MAX	800	Once this many results have accumulated matching terminates altogether
ITERATE_COUNT	400	Break the iteration up into smaller chunks for the iterationally-challenged IE (and allow for aborting the iteration early if the input value changes)
TRY_AGAIN_THRESHOLD	0	Try another match by breaking user words in half if initial match has less than this many results
MATCH_LENGTH_THRESHOLD	0	Don't even attempt a match if a word in the user input is less than this many characters
EXACT_MATCHING	false	Set this to true if you don't want the secondary loose matching, and only exact matches returned

If you find this code useful, please consider making a donation.