Liferay is easy: jQuery Auto Complete in Liferay

Today we will discuss about jQuery AutoComplete feature in Liferay. We Consider a scenario where a user has to fill all the addresses where he live in his entire life.The user selects one or more states. We use autocomplete for selection of states and when user click add button, state is added in the table.This blog is really helpful for creating dynamic table using AutoComplete and jQuery.

So lets start step by step:-

Step 1:-Create Liferay Project and Portlet
Just create a project and than create MVC Portlet in it.

Step 2:-Create table in database
Create a table states in database with two fields stateId(int) and name(varchar) and fill dummy data as:-

Step 3:-Create service
Create service.xml for states table :-

and build services. You can check my previous blog for detail explanation on Liferay Services.

Step 4:-Add js and css files
Open css folder inside docroot and add jquery-ui.css .Now open js folder and add jquery-ui.min.js and jquery.min.js.

Then provide entries in liferay-portlet.xml and also change required name space parameter to false as:-

Step 5:-Change your Controller
Open your java file and paste this:-

Explanation:-
1)Here serveResource Method handle the Ajax call .
2)The dynamic Query in the method resolve as:-
SELECT * FROM states s where s.name like '%a%';
3)This method return json array as:-
[
{"stateId":2,"name":"Arunachal Pradesh"},{"stateId":8,"name":"Haryana"}
]

Step 6:-Change view.jsp
Open view.jsp and paste this:-

Explanation:-
1)Here we create a resourceURL findStates on which Ajax call is generated when we type something in state textbox .
2)When some state is selected and you Click Add State button then javascript function is called where we show the table and add a row at the end of the table.
3)Similarly when delete link is click deleteRow function is called and delete the corresponding row.

Note:-
On submit of form you will get all the states in an array because we set a hidden field in each row with name stateIds.Ex-

long states[] = ParamUtil.getIntegerValues(request, "stateIds");

Output