Practical Programming

I was unable to find an jQuery autocomplete / jQuery autosuggest plugin available that met my exacting standards. While there are a good number of plugins available in the plugin repository, they are either too large, poorly written, or simply do not work as expected. In addition to this, the ones I reviewed lacked extensibility and a good default configuration.

I decided to write my own jQuery autosuggest plugin (GSUGGSET), and give back to the community.

Download: jquery.gsuggest.js

Project Requirements

• memic the behavior of Google Suggest
• make implementation as easy as adding suggest=”yes” to an input:text
• allow for simple integration of ajax or inline datasets
• intelligent caching
• light weight

Default Configuration

• ‘debug’: false
• ‘url’: ‘/suggest.cfc’
• ’size’: 10
• ‘cacheenabled’: true
• ‘cacheaggressive’: false //false - when user press ESC cache set is deallocated, true - cache set exist for duration of session
• ‘cacheforward’:false, //true - complete cache dataset, false - incomplete cache datasets
• ‘casesensitive’: false
• ’sort’: true
• ‘css0′: {’position’:’absolute’, ‘z-index’:’1′, ‘display’:’none’}
• ‘css’: {’background-color’:’#ffffff’, ‘border’:’solid 1px #000000′, ‘margin’:’0px’, ‘cursor’:’pointer’, ‘color’:’#000000′, ‘padding’:’0px’}
• ‘highlight’: ‘#bcd5ff’

Usage Information

While I wrote this plugin to be as simple and intuitive to use, there are some things you should be aware of before using it.

1. The dataset used by the plugin must be a JSON String Array.
2. There are two ways to assign a dataset to the input:text:, Inline & AJAX
3. The nosubmit attribute you see in the examples above prevents the form from submitting when enter/return is pressed. This overrides the default browser behavior, but it is up to you to decide if you want to use this.

————————————

A. Using an Inline Dataset

An inline dataset is one that does not make a round trip to any server to get a collection of data used for the suggest-box. To use this, simply add the parameter suggestvalue=”" to your input:text. Note, the suggest_value must be a JSON Array.

html: <input type="text" name="attorney_name" value="" size="100" suggest="yes" suggestvalue='["Micah","Shawn","Charles"]' nosubmit>

*The sugget_value does not need to be sorted, thats handled automatically.

B. Using an Ajax Dataset

An AJAX dataset is one that communicates with a server in the background to get a collection of data (when necessary thanks to caching) used for the suggest-box. To do so, you will need to pass the address of your ajax call (wether that be a cfm page, asp .net, php, whatever) to the URL Config Option.

jQuery(document).ready(function(){jQuery.gsuggest({'debug':true,'url':'myAjaxPage.aspx'})});

That page will receive two url parameters in its get request: value & method. value is the value of the input:text after keyup and should be used to execute a query and return a JSON String Array. method is an identifier to allow multiple queries to be executed inside a single ajax page. I prefer to have all of my suggest queries in one file, suggest.cfc, and you will see that reflected in the defaults.

html: <input type="text" name="attorney_name" value="" size="100" suggest="yes" nosubmit>

MIT License/GNU License

http://www.opensource.org/licenses/mit-license.php

http://www.gnu.org/licenses/gpl.html

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so.

No related posts.

jQuery Google Suggest