Type-ahead functionality uses AJAX, or Asynchronous Javascript and XML, which is a web technology that allows web applications to change portions of a web page without reloading the entire page. In this case, the AJAX functionality allows your EGL JSF Handler to add and remove suggestions to the input control without resubmitting the page. The EGL type-ahead functionality provides a shortcut to this common use of AJAX functionality, preventing you from having to put together an AJAX request by yourself. In the next lesson, you will learn to create custom AJAX requests.

Depending on how you write the EGL code for the type-ahead, you can provide suggestions based on the first few characters of input or from an arbitrary function that determines the suggestions dynamically.
state STRING {typeahead = YES,
validValues = ["AK","AL","AR","AZ",
"NC","NY","NH","NJ",
"NM","NE","NV","ND"]};
In this variable, 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."In this lesson, you use type-ahead functionality to suggest the last names of customers in the database for the user to search on. In this case, you must determine the type-ahead suggestions at run time, because the suggestions will depend on the values in the database. Therefore, you will create a function in a new JSF Handler that compares what the user has typed into an input field with the last names of customers in the database. The function then provides the matching names as type-ahead suggestions.
customersearchAJAX.jsp
Customer search with type-ahead
lastNameInput STRING {TypeaheadFunction = suggestLastNames};
allLastNames Customer[0];
customerToDisplay Customer;
The first variable will be bound to an input control on the page. The TypeaheadFunction property indicates that this variable will have a function that provides type-ahead suggestions. You will create this function later in this lesson.
The second variable will hold the list of last names in the database. The function providing suggestions will need this list.
The third variable is a single record that will show the results of the search.
handler customersearchAJAX type JSFHandler
{onPreRenderFunction = onPreRender,
view = "customersearchAJAX.jsp",
viewRootVar = viewRoot}
function onPreRender()
get allLastNames with
#sql{
select
LASTNAME
from EGL.CUSTOMER
group by
EGL.CUSTOMER.LASTNAME
};
end
This function will run each time the page is refreshed,
in order to retrieve a list of customer last names from the database
to compare with the user's input. function suggestLastNames(typedCharacters STRING in) returns (STRING[])
matchingLastNames STRING[0];
oneCustomer Customer;
oneCustomerName STRING;
//This variable represents the characters the user has typed.
typedCharacters = StrLib.upperCase(typedCharacters);
//Compare the user input to the values in the database.
for (counter INT from 1 to allLastNames.getSize())
oneCustomer = allLastNames[counter];
oneCustomerName = StrLib.upperCase(oneCustomer.LastName);
if (StrLib.indexOf(oneCustomerName, typedCharacters) == 1)
//This value starts with the same characters.
//Add this value to the type-ahead suggestions.
matchingLastNames.appendElement(oneCustomer.LastName);
end
end
return (matchingLastNames);
end
This function is the function referred to in the TypeaheadFunction property
of the variable you created earlier. As its name implies, this function
provides the suggestions for type-ahead. This function must receive
a single parameter: a STRING representing the characters that the
user has typed into the input control. Also, it must return an array
of STRINGs, representing the suggestions. With this function, you
can determine the type-ahead suggestions with any arbitrary EGL logic.In this case, the function follows the convention that the suggestions should start with the same characters as the user has typed into the input control. The function compares the characters that the user has typed in to each customer's last name, in each case, setting both values to upper case to eliminate any differences in capitalization. Each time the function finds a match, it adds the customer's last name to the array of results representing the type-ahead suggestions.
function displayCustomer()
get customerToDisplay with
#sql{
select
CUSTOMERID, FIRSTNAME, LASTNAME, PASSWORD, PHONE,
EMAILADDRESS, STREET, APARTMENT, CITY, "STATE",
POSTALCODE, DIRECTIONS
from EGL.CUSTOMER
where
LASTNAME = :lastNameInput
};
end
This function will be bound to a button on the page.
When the type-ahead control has helped the user find the name of a
unique customer, the user will click the button and run this function
to retrieve the customer's details. 


You can test the page by running it on the server and typing the first character or two of a customer's name into the input field:

When you choose a customer's name, you can then click Submit and see the customer's information:

Here is the complete code of the customersearchAJAX.egl file. If you see any errors marked by red X symbols in the file, make sure your code matches the code in this file:Completed customersearchAJAX.egl file after lesson 6.