Autosuggest

Autosuggest or auto-completion of form fields is an excellent tool to make it easier for customers to search or drive in similar or repetitive data into forms. Introduced to the masses thanks to Google suggest, this technique quickly found support among web developers and added problems to those who are responsible for the stability and architecture of information systems, largely due to the increased load on the full-text database search. In this article, I am considering a ready-made solution from BrandSpankingNew , which probably many could already see on the same iconfinder.net , and now on aleria.net .BSN Autosuggest 2.1.3 is just a set of css, images and js-processor. Installation is very simple. The required input field must have an id parameter. After that js and css is loaded. At the very end, an initialization object is created, which in turn binds event-s to the field and does all the work to get the generated response to the search request. Initializing object with settings: var suggest = new bsn.AutoSuggest('search_input', {
script:"search.php?",
varname:"q",
json:true,
shownoresults:false,
maxresults:5
}); var suggest = new bsn.AutoSuggest('search_input', {
script:"search.php?",
varname:"q",
json:true,
shownoresults:false,
maxresults:5
}); As you can see from the settings - we bind auto-fill to the search_input field, and the search.php script performs the entire search procedure. It can produce results both in JSON and in XML format, but since there is no need for universal output (id, value, info are stitched in js), JSON can be generated simply as strings without fully transforming php objects into JSON. Search result in JSON format:

  <code> {results: [<br /> {id: "1", value: "Foobar", info: "Cheshire"}, <br /> {id: "2", value: "Foobarfly", info: "Shropshire"}, <br /> {id: "3", value: "Foobarnacle", info: "Essex"} <br />]} </ code> 

Do not forget to limit the size of the word to at least 3 letters. The script itself will generate a div and set it under the field, and then you can press the keys to select the appropriate result.