Creating an auto complete text input field using the CFINPUT tag in ColdFusion

Readability

Creating an auto complete text input field using the CFINPUT tag in ColdFusion

The fol­low­ing exam­ple shows how you can cre­ate an auto com­plete text input field using the <CFIN­PUT> tag in Cold­Fu­sion by set­ting the autoSuggest attribute to a list of values.


    

And the out­put of the <CFIN­PUT> tag is as fol­lows:

Or you can pop­u­late the autoSuggest attribute from a data­base query, as seen in the fol­low­ing example:


    SELECT DISTINCT A.STATE
    FROM ARTISTS A
    ORDER BY A.STATE ASC



    

The following example shows how you can create an auto complete text input field using the <CFINPUT> tag in ColdFusion by setting the autoSuggest attribute to a list of values.

<cfform>
    <cfinput name="mapType"
            type="text"
            autoSuggest="Alabama,Alaska,Arizona,Arkansas,California,Colorado,Connecticut"
            typeahead="true" />
</cfform>

And the output of the <CFINPUT> tag is as follows:

Or you can populate the autoSuggest attribute from a database query, as seen in the following example:

<cfquery name="getArtistStates" datasource="cfartgallery">
    SELECT DISTINCT A.STATE
    FROM ARTISTS A
    ORDER BY A.STATE ASC
</cfquery>
 
<cfform>
    <cfinput name="mapType"
            type="text"
            autoSuggest="#valueList(getArtistStates.STATE)#"
            typeahead="true" />
</cfform>

Leave a Reply

Your email address will not be published.