Goal: Add an autosuggest textbox similar to Google's autosuggest.

Assumptions:

1. You have installed the ajaxhelper package.
2. You do not want to fetch the data everytime and just fetch it once.

This is somewhat similar to Ryan Gallimore's smart search widget. The differences are:

• Doesn't hit the database everytime a key is pressed
• Support for search term and description in the results like Google's autosuggest
• Doesn't need an additional page for the ajaxupdater to load as it already supports query or list passing

Steps:

1. For the input field, just create a textbox with id parameter set to "autosuggest_box" (current limitation). In ad_form you can do this like so:

   {tags:text,optional {html {size 50 id autosuggest_box}}....

2. Generate the ajaxhelper source for autosuggest

   set ah_sources [ah::js_sources -source "autosuggest"]

3. Generate the array for the suggest box. The first element will be the value for autosuggestion and the second one for the description.

   set query "select username, email from cc_users"
set ah_suggestions_array [ah::generate_autosuggest_array -sql_query $sql_query]
   or
   set array_list {{apple red} {banana yellow} {orange orange}}
set ah_suggestions_array [ah::generate_autosuggest_array -array_list $array_list]

4. In the corresponding adp file, add in the following

   <property name="header_stuff">
@ah_sources;noquote@
<script type="text/javascript">
@ah_suggestions_array;noquote@
</script>
</property>


5. Call the loadAutoSuggest js proc on load

   window.onload=loadAutoSuggest();

6. You should now be able to type into the textbox and fire up the autosuggest script.

Some nice things to do

• integrate into ad_form so that one can just do "fieldname:text(autosuggest)"
• allow to be used as the values param in listfilter widgets so that it would be easier to filter by typing rather than being presented with long select boxes