EGL/JSF Type-Ahead Functionality

1. EGL/JSF Type-Ahead Functionality This section describes how to enable type-ahead functionality for JSF Input Components.

2. 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

3. 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

4.  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

5.  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).

6.  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.

7.  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.

8.  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.