How to use Liferay AUI's Autocomplete feature

Liferay bundle comes with the AUI module loaded by default. AUI supports many of the client side components one of them is "Autocomplete".

Here are the steps to use AUI autocomplete feature

1) Download and Extract "alloy-1.5.1" (required if bundle is not Liferay,lets say creating dynamic web project)
2) Create JSP file to add aui's js & corresponding stylesheet
3) Load "aui-autocomplete" module on JSP
4)  Run & Verify

Here are the steps in detailed:

1) Download and Extract "alloy-1.5.1" (required if bundle is not Liferay,lets say creating dynamic web project)

This steps is required only if you are not using Liferay's bundle. Liferay bundle has AUI available by default.
For our example we have used "alloy-1.5.1". Lets download and copy our content to the location "{c:}\alloy-1.5.1".


2) Create JSP file to add aui's js & corresponding stylesheet

In order to use AUI components we need to import below files onto our JSP

We have created dynamic web project with the name "student". We have copied "{c:}\alloy-1.5.1\build" to the location "/student/WebContent/js/build" path.

Once its copied to the above path use below statements to include aui.js & "aui-ski-classic-all-min.css" like below:

<script src="/student/js/build/aui/aui.js" type="text/javascript"></script>
<link rel="stylesheet" href="/student/js/build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />

3) Load "aui-autocomplete" module on JSP

Once "aui.js" is included on our JSP we need to load one of the modules from AUI.

Here is the code snippet to load "aui-autocomplete"

<script type="text/javascript">
AUI().use('aui-autocomplete',function (A) {
var studentData = [
 ['45', 'Scott', 'scott@test.com'],
 ['26', 'Micheal', 'micheal@test.com'],
 ['47', 'Peter', 'peter@test.com']      
];

new A.AutoComplete(
 {
contentBox: '#studentList',
delimChar: ',',
dataSource: studentData,
schema: {
 resultFields: ['id', 'studentName', 'studentEmail']
},
matchKey: 'studentEmail',
typeAhead: true
 }).render();
 });
</script>

We have use an example of student. In our example we have created "studentData" list with three different values i.e. "id","studentName","studentEmail".

We have created sample data with the same structure which is available in "studentData". During auto complete user may use one of these values to fetch student data.
Property, "matchKey" is the one through which we can specify which key to be used for auto complete feature.

4)  Run & Verify

By default when we load the JSP it will look something like this:

When we type "p..." it will show the matching email address starting with "P" letter. Here is the snippet for same:

When we click on the dropdown next to the textbox it shows all the record we have provided in the "studentData". Here is the snippet for the same:

Cheers!
Henal Saraiya
(Lead Consultant)
CIGNEX Datamatics