Table of Contents
Advertisement
DEVELOPING COLDFUSION 9 APPLICATIONS
Requesting and Presenting Information
Using autosuggest text input fields
When you create a text input (
source that provides field completion suggestions as the user types. Use the
specify the number of characters the user must type before first displaying any suggestions.
Note: To place label text next to a
both Internet Explorer and Firefox, surround the label text in an HTML
attribute. Also if you have multiple controls, and place them on separate lines, follow the input controls with three
tags, as in the following example. Otherwise, the label and control do not lay out properly.
<div style="float: left"> Name: </div>
<cfinput name="userName" type="text" autosuggest="Andrew, Jane, Robert"> <br><br><br>
The control suggests entries from a static list of values. To use a static suggestion list, specify the list entries in the
attribute, and separate the entries by the character specified by the
autosuggest
comma), as the following example shows:
<cfinput type="text"
autosuggest="Alabama\Alaska\Arkansas\Arizona\Maryland\Minnesota\Missouri"
name="city" delimiter="\">
In this example, if you type the character a (in uppercase or lowercase) in the
start with A appears in a drop-down list. You navigate to a selection by using the arrow keys, and press Enter to select
the item.
You also have the control suggest values from a dynamically generated suggestion list. To use a dynamic list, specify a
CFC function, JavaScript function, or URL in the
to specify the minimum time between function invocations as the user types. This limits the number of requests that
are sent to the server. If you use a dynamic list, the input field has an icon to its right that animates while suggestions
are fetched.
When you use a bind expression you must include a
URL parameters. This parameter binds to the user input in the input control and passes it to the function or page.
A CFC or JavaScript autosuggest function must return the suggestion values as a one-dimensional array or as a
comma-delimited list.
The HTTP response body from a URL must consist only of the array or list of suggestion values in JSON format. In
ColdFusion, you can use the
suggestions is named nodeArray, for example, the following line would specify the only output on a CFML page that
is called by using a bind expression with a URL:
<cfoutput>#serializeJSON(nodeArray)#</cfoutput>
You do not have to limit the returned data to values that match the
side code displays only the values that match the user input. In fact, the called function or page does not even have to
use the value of the
cfautosuggestvalue
data would otherwise be long.
The following example shows how to use a bind expression to populate autosuggest lists. The Last Name text box
displays an autosuggest list with all last names in the database that match the keys typed in the box. The First Name
text box uses binding to the Last Name text box to display only the first names that correspond to the last name and
the text entered in the box. The database query limits the responses to only include results that match the autosuggest
criteria, so the autosuggest list displays all the returned results, and the suggestions only match if the database entry
has a case-correct match.
) in HTML, use the
type="text"
control that uses an
cfinput
autosuggest
{cfautosuggestvalue}
function to convert an array to JSON format. If an array with the
serializeJSON
parameter that you pass to it. However, use the parameter if the returned
Last updated 8/5/2010
attribute to specify a static or dynamic
autosuggest
autosuggestMinLength
attribute and have it display correctly in
autosuggest
tag with a
div
style="float: left"
delimiter
control, the list of states that
cfinput
attribute. Use the
autosuggestBindDelay
bind parameter in the function call or
contents, because the client-
cfautosuggestvalue
844
attribute to
<br>
attribute (by default, a
attribute
Advertisement
Table of Contents
