®
IBM Software Group
EGL/JSF Type-Ahead Functionality
This section describes how to enable type-ahead functionality for JSF Input
Components.
© 2006 IBM Corporation
Providing Type-ahead Support for Input Controls
 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:
 Lets add type-ahead functionality to input fields
Last update: 12/04/2007
2
Providing type-ahead support for input control
 EGL can obtain the options for a type-ahead input field in one of three ways
 EGL can compare what the user has typed with the values in the validValues property for
the variable bound to the control. In this case, the type-ahead feature presents all of the
values in the list of valid values that start with the same characters as the user has typed.

 EGL can compare what the user has typed with the values in a DataTable part specified in a
variable's validatorDataTable property. This method works just like the validValues
method.

 You can define a custom function to assemble an array of options to present to the user.
Typically, type-ahead presents options that have the same starting characters as the
characters that the user has already typed in, but in this case, the function can return an
arbitrary array of options.

 With these properties we provide many different endless possibilities for type-ahead
functionality
Last update: 12/04/2007
3
 Providing type-ahead support for input controls – 1 of 5
 Let’s create a page that explores each
one of these typeahead functions.
 Create a web page called
“typeAhead.jsp” and add the following
header text.
 Next create a new EGL Source File
called “stateAbbrevs” in the
“datatables” package.
 Now replace the boiler plate code in
stateAbbrevs.egl with the code in the
notes
Last update: 12/04/2007
4
 Providing type-ahead support for input controls – 2 of 5
 Next, right click over the page and select “edit page code”
 Replace the boiler plate code with the code in the notes.
 Note the following:
 When an input field is desired with type-ahead functionality, all that is needed is one of two
EGL variable properties – typeahead or typeaheadfunction.
 Typeahead is used in conjunction with either the “validvalues” property or the
“validatordatatable” property.
 The following are all the possibilities:
 variableName string {typeahead = yes, validvalues = [“NC”, “ND”, NH”]};
 variableName string {typeahead = yes, validatorDataTable = nameOfDataTable};
 variableName string {typeaheadFunction = customFunctionName};
 Using type-ahead with the valid values property is fairly straightforward. All that is needed is
to explicitly state the possible values in the variable declaration.
 Type-ahead with a validatorDataTable is virtually identical to using the validvalues property
except you use a data table to organize your possible values.
 Type-ahead with a function is also fairly straightforward, and very powerful. The developer
can create a custom function that accepts a single parameter (the input from the keyboard)
and returns a string array (the results to be displayed as type ahead options).
Last update: 12/04/2007
5
 Providing type-ahead support for input controls – 3 of 5




Let’s design our page!
Drag the stateValid, statesDataTable, and statesDB variables onto the page.
Create them as input fields and deselect any buttons to be made with them.
Change the text before the input fields to the following:
 Run the page and check out the type-ahead functionality!!
 The first input field utilizes type-ahead through the valid values property.
 The second input field utilizes type-ahead through the data table property.
 The third input field utilizes type-ahead through a custom function.
Last update: 12/04/2007
6
 Providing type-ahead support for input controls – 4 of 5
 Let’s take a look at a sample custom function one might create.
 The following function evaluates the input received from the keyboard and compares
it to an array of states (which are pulled from the data base).
 The function loops through the array of states and checks to see if the character input
is equivalent to the starting character of each state. Once a state is identified as
containing the input as a starting character, it is appended to a string array and
returned. This string array is then output as type-ahead options on the web page!
 The possibilities with a type-ahead function are endless. For example, one could
even create a stored procedure to search through a data base for matches.
Last update: 12/04/2007
7
 Providing type-ahead support for input controls – 5 of 5
 Along with the EGL code aspect of type-ahead are an array of JSF attributes.
 These can be seen by selecting the arrow next to an input field with type-ahead
capabilities. From the properties view are many properties that van be set, including
a limit to the number of suggestions that are displayed.
Last update: 12/04/2007
8