Features

• Can display any json encoded data as a list
• Use of up/down arrows to cycle through list
• Use enter or tab key to select value
• Display a loading image
• Store the id of the selected value in a separate field
• Can have multiple suggestion boxes on one page
• KeyUp delay to lower the number of calls to ajax page
• PHP and ASP examples included in the demo download

Usage

Use the textbox input id as the jQuery selector for the plugin.

                $("#inputBox1").jqEasySuggest({
                    ajax_file_path: "php/ajax.php"
                });
            

If you have multiple inputs on your page you can assign an id to each input. The jquery jqEasySuggest autosuggest plugin will create a suggestion list for each input..

                $("#inputBox1, #inputBox2").jqEasySuggest({
                    ajax_file_path: "php/ajax.php"
                });
            

Here's an example using an id and custom settings:

                // using id and custom settings
                $("#inputBox3").jqEasySuggest({
                    ajax_file_path 		: "php/ajax.php",
                    min_keyword_length	: 5,
                    showLoadingImage	: true,
                    focus_color			: "green",
                    keyupDelay			: 500,
                    id_element	 		: "id-holder",
                    sql_match_type	 	: "starts",
                    es_width			: "auto",
                    es_opacity			: 0.9,
                    es_max_results		: 10,
                    es_offset_left		: 0,
                    es_offset_top		: -5
                });
            

Options

Here are all of jqEasySuggest's options and their default values:

                // these can all be overridden in your code
                ajax_file_path 		: "",		// path to the file that returns the json encoded results
				min_keyword_length	: 2,		// min char length to trigger the ajax lookup
				showLoadingImage	: true,		// boolean value to display a loading image in the textbox while typing
				focus_color			: "",		// change the textbox border color on focus
				keyupDelay			: 200,		// add keyup delay to prevent lookup until user has finished typing (lowers the numbers of ajax calls)
				id_element	 		: "",		// optional id of the element (textbox, hidden textbox, etc.) to store the id of the lookup value
				sql_match_type	 	: "starts",	// used in the sql LIKE clause. values are starts, ends, or contains
				es_width			: "auto",	// width of the drop down suggest box. auto will automatically calculate the width of the selectors width
				es_opacity			: 0.95,		// opacity of the drop down suggest box
				es_max_results		: 10,		// max number of results to display in the list of suggestions
				es_offset_left		: 0,		// drop down suggest box left offset position
				es_offset_top		: 0			// drop down suggest box top offset position
            

Demo Download

If you find this resource useful, or if you use this code/plugin on your website, consider tossing a buck, or two, my way to help cover costs!