Web applications generally consist of forms, with textboxes, checkboxes, dropdowns etc to gather the user input. With textboxes the developer need to provide implementation for validations and with dropdowns he needs to provide the data from which the user can make a choice. But there is a small problem, the inconvenience caused to user in case the data is huge. For Example consider a dropdown with 10000 options.
Yahoo’s autocomplete provides an answer to that, by filtering the results based on the user input. The best part of the implementation lies in the ease of development using Ajax without worrying about the HttpServletRequest or the ActiveX object (for IE v4.0 and above) or the rendering of data in the jsp from the XML format it’s received in.
That brings with it huge advantages in terms of development turnaround time.
2. FUNCTIONALITY
Consider a scenario where the user needs to enter an item into a text box which could ambiguous or hard to remember and therefore has the potential to be mis-typed.
AutoComplete control fits into the requirements under the following set of requirements:
1. The suggestions can be pulled from a manageable set of data.
2. The input item can be entered in multiple ways.
3. The input item can be matched with a specific data item in the system.
4. Speed and accuracy of entry is an important goal.
5. The total number of items would be too large or inconvenient for displaying in a standard drop down box.
In case there is a situation where any of these conditions are present Autocomplete control is the way forward. With following advantages (User’s perspective)
1. Reducing the number of keystrokes allows for faster user input.
2. Showing additional formatting information in the suggested items list (like the email address in the example above) removes ambiguity.
3. Continual feedback helps the user narrow in on the correct choice.
Kindly refer to following section for more details:
http://developer.yahoo.com/ypatterns/pattern.php?pattern=autocomplete
3. BUSINESS CONTEXTS
In order to build a robust and efficient reusable component, it is essential to identify a variety of areas in which it can be applied. These could be
i) All struts based applications will work perfectly with this. For other kinds of web applications all you need to do is to configure your datasource to provide the data in XML format. It can be in any platform such as PHP scripts, Java applications, or web services. At its core a datasource is a URL which provides you with the required filtered data in the format of your choice.
iii) Any web based application with javascript as the scripting language can use this autocomplete functionality. Yes, it can work with .Net web applications as well.
4. DEPENDENCIES
To start using this control YUI.zip(Used v2.3.1) needs to be downloaded from the developer.yahoo.com site. The .js files on which there is dependency can be found in this folder (upon unzipping of course).
Additionally Struts related jar needs to be added (present in the lib folder)
5. IMPLEMENTATION PROCEDURE/CONFIGURATION
The implementation begins with creating a datasource to provide the data the user requires in XML format at runtime. This basically involves querying for the data from a web application over HTTP. Whatever be the implementation it all finally boils down to creation of a URL which accepts query in the following format:
http://url/?query=arg1&addnParams=args2
Once this datasource is in place, the struts action class (as per our implementation) can be used to get the data (from information systems). This data is then populated to an object of type intelliDataList, which in turn is set in the response object. This action is redirected to intelliList.jsp which writes the xml data after retrieving it from the intelliDataList object (this object has a function getXml() ). This forms the response text for the autocomplete widget, which gets parsed and is displayed.
Autocomplete widget is highly configurable. To control the look and feel the autocomplete.css needs to be modified suitably. Please refer to http://developer.yahoo.com/yui/articles/skinning/ section for a detailed discussion.
Similarly, the datasource configuration can be done very easily in the intellAutocomplete.js file. You can use three kinds of datasources (giving out plain text response, xml response orJSON), this POC uses the XML response.
**Note: Refer to Understanding Data Types and Schemas section at http://developer.yahoo.com/yui/autocomplete/#uri for more in depth information
For all those of you familier with Struts based web applications following is a brief outline of what needs to be done to get this thing off ground.
Directory Structure and other details
1. /struts-ajax : This is the root directory of the web application .All the jsp and Html files are stored here.
2. /struts-ajax/script : All the javascript files initializing the yahoo widgets or used for any other functionalities are kept here.
3. /struts-ajax/script/autocomplete : The javascript files given by yahoo which facilitates the autocomplete functionality.
4. /struts-ajax/css : All the style sheets are kept here
5. /struts-ajax/WEB-INF : This directory contains all resources related to the application that are not in the document root of the application.This is where your web application deployment descriptor is located.
6. /struts-ajax/WEB-INF/src/ajaxsample : This directory contains the java files gets all possible data entries for the a particular textbox.
7. /struts-ajax/WEB-INF/src/ajaxsample/controller : This directory contains the action class used to filter the entire list according to the text entered by the user.
8. /struts-ajax/WEB-INF/src/ajaxsample/form : This directory contains the Action forms corresponding to jsp.
9. /struts-ajax/WEB-INF/src/ajaxsample/model: This directory contains the two classes:
* IntelliData – A list containing objects of this class is expected from the user.
* IntelliDataList – A convenience bean that holds a list of IntelliData instances.
10. /struts-ajax/WEB-INF/classes : This directory is where class files of above mention java files are kept.
11. /struts-ajax/WEB-INF/lib : This directory contains Java Archive files that the web application depends upon. For example, this is where you would place a JAR file that contained all the Struts framework classes.
6. LIMITATIONS
One serious limitation arises when the data from the datasource contains some special characters which hinder the formation of corresponding XML. In that case the XML received by the widget is not well formed and the widget stops working.
This Reusable component has provided implementation for filter out such characters using the function getValidXML() which can be suitably overridden if necessary.
Also, when the amount of data being fetched is huge here can be a performance drop, even with the build in caching. To overcome this issue the size of the cache maintained by the widget can be increased, or caching service be implemented at the datasource level. This is especially true in case the data fetched is live data (not cacheable) or has to interact with
7. REFERENCE ARTIFACTS
Refer to the following online resource for further details, as this document draws heavily from the inputs provided therein.
http://developer.yahoo.com/yui/autocomplete
8. How does it all look:
Normal Text boxes:
Type search parameter to get result:
Type " " to get a complete listing:
The values in the Age column are constrained by the value selected in name:
