JSF text input controls can use the JSF type-ahead feature to anticipate what a user might be typing into the input control. Input controls with type-ahead present a list of options based on the first few characters that the user types into the control. Then, the user can select one of these options or continue typing different text:

As the user continues to type, the type-ahead feature filters the options to match the new values that the user has typed into the field:

The steps for using type-ahead depend on which of these methods you use to obtain the list of options.
The simplest way to provide options for the type-ahead function is to associate the variable bound to the field with a list of options, either in a Data Table or in a list of valid values.
state STRING;
state STRING {typeahead = YES};
state STRING {typeahead = YES,
validValues = ["AK","AL","AR","AZ",
"NC","NY","NH","NJ",
"NM","NE","NV","ND"]};
In this example, the valid
values
are the abbreviations of U.S. states beginning with the letters "A"
and "N."
When the user types the letter "A" into the input control, type-ahead
will
provide the abbreviations beginning with "A", and likewise with the
letter
"N" and the abbreviations beginning with "N."When using type-ahead with a list of valid values, the valid values cannot contain a range.
state string {typeahead = YES,
ValidatorDataTable = data.stateAbbrevs};
The matching
Data
Table might look like this example, providing the same information
as in the validValues example
above:package data;
dataTable stateAbbrevs type MatchValidTable {shared = no, resident = no}
3 abbrev char(2);
{contents = [
["AK"],["AL"],["AR"],["AZ"],
["NC"],["NY"],["NH"],["NJ"],
["NM"],["NE"],["NV"],["ND"]
]}
end
Data Tables used with type-ahead must be of the type
MatchValidTable.For more control over the options presented in type-ahead, you can create a function that dynamically determines the options at run time.
// Return any state names for which
//the key is a substring of the full state name.
function getStateChoices( key string in ) returns( string[] )
results string[0];
key_upper string = strlib.upperCase( key );
value string;
// Search for values with the same starting characters.
for ( i int from 1 to syslib.size( states ) )
// Compare each value in the data table to the key.
value = strlib.upperCase( states.fullname[i] );
if ( strlib.indexOf( value, key_upper ) == 1 )
// This value starts with the same characters as the key.
// Add it to the list of options.
results.appendElement( states.fullname[i] );
end
end
return( results );
end
This function compares the text that the user has typed
into the
input control, represented by the variable key, with
the
values in a Data Table. The code if ( strlib.indexOf( value,
key_upper
) == 1 ) determines if the value in the Data Table starts
with the
characters that the user has typed, and if so, the code results.appendElement(
states.fullname[i] ); adds the value in the Data Table to
the array
of options for type-ahead. Although this function uses information from a Data Table like the following example, the function could retrieve data from any source, such as a database or record variable.
package data;
dataTable states type MatchValidTable
{shared = no, resident = no}
3 fullname char(20);
{contents = [
["ALASKA"],
["ALABAMA"],
["ARKANSAS"],
["ARIZONA"],
["NORTH CAROLINA"],
["NORTH DAKOTA"],
["NEBRASKA"],
["NEW HAMPSHIRE"],
["NEW JERSEY"],
["NEW MEXICO"],
["NEVADA"],
["NEW YORK"]
]}
end
state STRING;
state STRING {typeaheadFunction = getStateChoices};
You can customize the appearance and behavior of the type-ahead functionality on the page. To set these options, follow these steps:
