Way 2 Web

Web development tips


 
Ajax Suggest

Introduction

The word is on the tip of your tongue... but remains elusive. Ajax suggestions to the rescue!

This widget applies to an input field and supplies a drop-down list of options or suggestions based on the text already entered. (This functionality was made popular by Google Suggest, that predicts user search key words, but it has a wide variety of applications.)

The widget requires only minimal Html and Css, and it supports a wide variety of configurations.

Demo

Name suggestions

Start typing to see the name suggestions.


Suggest textbox

Another one

For each, try typing "a" then "n". Then delete the text and type "z".

To select an option, click it or type enter, tab, left arrow or right arrow keys.

In the first example, the server page (ajaxServer.aspx) returns a JSON array of the form:

["Adam","Cathy","Craig","Daniel","Darren","Jane","Janet"]

The second example uses the text/value configuration and the server page returns a JSON array of the form:

[{text:"Adam",value:"Adam@email.com"},{text:"Cathy",value:"Cathy@email.com"},...]

The server-side distinguishes between the two according to the request parameters provided - the action=... part.

[Top of page]

API

Constructor

AjaxSuggest (elID, url [, options]);
elID
Index indicating which tab is to be displayed on page load
url
Url of server page that returns results. Results are a JSON array of objects, each of which has a "text" property [and optionally a "value" property too. See Options below.]
options
(Optional) Options object. Default object is exposed as:
ylib.widget.AjaxSuggest.DefaultOptions()
Properties:
useHiddenValue
(Default: false) Stores the selected option "value" in a hidden input field. The hidden field will have the same name as the original input field. (Requires that server data objects have both "text" and "value" properties)
expectValueAndText
(Default: false) Result from server page is an array of either text (false) or objects with properties "text" and "value" (true).
useValueNotText
(Default: false) Will store the "value" of the selected option in the text field (when useHiddenValue is false).
suggestionsClassName
(Default: 'suggestions') Css class for entire suggestion drop-down area.
suggestionClassName
(Default: 'suggestion') Css class for individual suggestion span.
selectedSuggestionClassName
(Default: 'selected-suggestion') Css class for currently suelected suggestion span.
matchClassName
(Default: 'match') Css class for matched text in individual suggestion.
matchTextWidth
(Default: true) Suggestion drop-down area has width equal to input field.
matchAnywhere
(Default: true) Find matching text anywhere or only at text start.
ignoreCase
(Default: true) Match search is case-insensitive.
maxSuggestions
(Default: 10) Maximum number of suggestions displayed.
showMaxMessage
(Default: false) Displays suggestion indicator that more suggestions exist than those displayed (when more suggections than maxSuggestions)
maxClassName
(Default: 'suggestion-max') Css class for "more matches" indicator.
maxMessage
(Default: '...') Text for more matches indicator.
useTimeout
(Default: true) Hide the suggestions drop-down when inactive for a given time.
timeVisible
(Default: 3000) Duration in milliseconds suggestion drop-down is visible (when useTimeout is true).
method
(Default: GET) Http request method.
params
(Default: []) Request parameters as an array of strings of the format "name=value".
showNoMatchMessage
(Default: false) Displays indicator that no matches were found.
noMatchClassName
(Default: 'no-match') Css class for no matches message.
noMatchMessage
(Default: 'No matches found') Message displayed in "no-matches" indicator.
disableEnterKey
(Default: 'true') Disables form submission when Enter is pressed for the the input field.
[Top of page]

Code

HTML

Suggest textbox <input type="text" id="Text1" name="txtInput" />
<br /><br />
Another one textbox <input type="text" id="Text2" name="txtInput2" />
<br />

Javascript

<script language="javascript" src="../../js/x/x_core.js"></script>
<script language="javascript" src="../../js/y/ylib.js"></script>
<script language="javascript" src="../../js/y/y_util.js"></script>
<script language="javascript" src="../../js/y/y_AjaxTabs.js"></script>
<script language="javascript">
    var suggest, suggest2;
    
    window.onload = MyOnLoad;  
    function MyOnLoad(){
        //first suggestion object (use default options)
        suggest = new ylib.widget.AjaxSuggest('txtInput', 
                        'ajaxServer.aspx?action=suggest');   
        //second suggestion object (use custom options)
        var options = ylib.widget.AjaxSuggest.DefaultOptions();
        options.maxSuggestions = 5;
        options.params = ["action=suggest2"];
        options.expectValueAndText = true;
        options.useValueNotText = true;
        options.showNoMatchMessage = true;
        options.useTimeout = false;
        suggest2 = new ylib.widget.AjaxSuggest('txtInput2', 
                        'ajaxServer.aspx', options);   
        
    }
</script>

Css

<style>
    span.suggestions {
        background-color: #EBEBEB;
        overflow: hidden;
        padding:0;
        margin:0;
    }
    span.suggestion,
    span.selected-suggestion {
        border: 0;
        background-color: #EBEBEB;
        font-weight: normal;
        height: 18px;
    }
    span.selected-suggestion,
    span.selected-suggestion span.match {    
        background: #006699;
        color: white;
        cursor: pointer;
    }
    span.match {    
        text-decoration: underline;
    }
    span.no-match {
        font-weight: bold;
        color: #0000FF;
    }
</style>
<!--[if IE 6]>
<style>
    span.suggestions  {  
	    margin-left: -15px;
    }
</style>
<![endif]-->

Note that I have added a conditional style section <!--[if IE 6]> to overcome an IE6 issue: <element>.offsetLeft does not take border width into account.

[Top of page]

Files

Have you benefitted from this site?

If so, please consider making a donation.

Your appreciation is.. well, greatly appreciated.

[Top of page]