Try it out

Type your query into the box below (it searches for fruits and vegetables).

What is it?

Smart Suggest is a "fancy" search suggestion plugin for jQuery. Smart Suggest takes auto-complete boxes to the next level.

• Ridiculously easy. A powerful search box with incredible capabilities, all from one line of code.
• Category grouping. Display results from various categories, all in one box. For instance, show results from "web pages," "downloads," and "support articles" all from one search query.
• Images. Optionally show a 40x40px image next to each of your results, adding some extra flare.
• Run JS on click. Run any JavaScript code you'd like whenever a result is clicked on.
• Completely customizable CSS. While Smart Suggest comes with a standard style, you can completely customize it to fit your site.
• Compatible with all major browsers. Firefox (Windows & Mac), IE6/7/8, Safari, Chrome.
• Uses JSON for results. This makes it compatible with pretty much any language on the Internet today. Read more about JSON.

How to use

1. Copy files

Copy the following files and directories from the code directory of the ZIP to your project directory:

• css/jquery.smartsuggest.css
• js/jquery.smartsuggest.js
• images/jquery-smartsuggest/

2. Link to the JavaScript and CSS

You need to link to both the jQuery library and the files you just copied:

<link rel="stylesheet" type="text/css" href="css/smartSuggest.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
<script type="text/javascript" src="js/smartSuggest.js">

3. Add the JavaScript code

Now you need to tell the plugin which input field(s) you'd like to convert to Smart Suggest boxes. Assuming your input field has an ID of field:

$(document).ready(function() {
  $('#field').smartSuggest({
    src: 'DATA SOURCE URL HERE'
  });
});

4. Create your JSON output source

• The plugin will send a GET query to your data source. The user's search text is sent as the q variable.
• Your script needs to search your database with that query and output the results in JSON format.
• Check out the PHP code in search_multiple.php to see how to format it in PHP. All you essentially do is create an array then call json_encode($arr).
• The JSON needs to be in the following format:

[
  # Add below block for each category
  {
    header: {
      title: "Category Title",
      num: "Number of results",
      limit: "Number to display"
    },
    data: [
      # Add below block for each result
      {
        primary: "Title",
        secondary: "Description (Optional)",
        image: "URL (Optional)",
        onclick: "JavaScript to execute when clicked (Optional)"
      }
    ]
  }
]

Configuration options

Parameters

The following parameters can be included in the Smart Suggest call. Show code for an example.

$('#field').smartSuggest({
  parameter: value,
  parameter: value
  ...
});

• src: Required. URL to the data source for the JSON content.
• boxId: The ID of the results box that the plugin creates. Use % to fill in the field ID (to allow for multiple Smart Suggests on a page). (Default: %-suggestions)
• classPrefix: The prefix on CSS classes. (Default: ss-)
• executeCode: Whether or not to execute the onClick code provided in JSON. (Default: true)
• fillBox: You can choose to fill the input box with the selected result row (like a regular auto-complete). Note that it will still execute any JavaScript code provided. See the "auto-complete fill style" example below. (Default: false)
• fillBoxWith: If fillBox is set to true, this is the variable that it fills the box with (you can create a new variable in the JSON). (Default: primary)
• minChars: The minimum number of characters that need to be entered before the plugin kicks in and starts finding results. (Default: 2)
• noResultsText: The text displayed in the upper-right hand corner of the box when there are no results. (Default: No results.)
• resultsText: The text displayed in the upper-right hand corner of the box for the number of results. Use % to show the number of results, and $ to show the limit. (Default: $ of % results.)
• showEmptyCategories: If there are empty categories in the JSON data and this is set to true, it will still show the category headers. (Default: false)
• showImages: Whether or not to show images. If this is set to false, there is no need to provide the image URL in the JSON. (Default: true)
• timeoutLength: The amount of time, in milliseconds, to wait for the user to stop typing to do a search query. (Default: 500)

Other notes

• Call the smartSuggest() function on only one element at a time. For instance, do not do this: $('#f1, #f2').smartSuggest()
• You may call smartSuggest() multiple times per page as long as the boxId is different for each instance.

Examples

Single category

Show code

HTML:
<input type="text" id="field2" size="30" value="" />

JavaScript:
$('#field2').smartSuggest({
  src: 'assets/php/search_single.php'
});

Multiple categories

Show code

HTML:
<input type="text" id="field3" size="30" value="" />

JavaScript:
$('#field3').smartSuggest({
  src: 'assets/php/search_multiple.php'
});

Auto-complete fill style

Show code

HTML:
<input type="text" id="field4" size="30" value="" />

JavaScript:
$('#field4').smartSuggest({
  src: 'assets/php/search_multiple.php',
  fillBox: true,
  fillBoxWith: 'fill_text',
  executeCode: false
});

No images

Show code

HTML:
<input type="text" id="field5" size="30" value="" />

JavaScript:
$('#field5').smartSuggest({
  src: 'assets/php/search_multiple.php',
  showImages: false
});

Questions? Suggestions?

Visit JamesSkidmore.com to get in touch.

To download this script, please visit this link.