Home
The Toolkit for Online Communities
15939 Community Members, 0 members online, 2441 visitors today
Log In Register

OpenACS BlogArchive

OpenACS Home : OpenACS Blog : Archive : 2006 : October

How-To: Add an Autosuggest Text Field

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

10:53 AM, 30 Oct 2006 by Deds Castillo Permalink | Comments (0)

XML

Archive

October 2006
S M T W T F S
10  11  12  13  14 
15  16  17  18  19  20  21 
22  23  24  25  26  27  28 
29  30  31         
April 2007
March 2007
October 2006
March 2006
February 2006
January 2006
December 2005
November 2005
August 2005
July 2005
June 2005
May 2005

Notifications

Icon of Envelope Request notifications

Syndication Feed

XML

Recent Comments

  1. Silvio Ernesto: hola
  2. Martin v. Löwis: Cannot run pg_ctl from launchd
  3. Joan Miller: Something Interesting
  4. Hubert Erlmoser: trustpharma.com
  5. Hubert Erlmoser: TRUSTPHARMA
  6. Ben Koot: Selva
  7. LARRY SCOVEL: TRUST PHARMA
  8. Nick Carroll: Theme Selva
  9. Ben Koot: More enhancements
  10. Jane Perez: Trustpharma.com