Liferay Auto Complete List with Ajax

Meera Prince
Meera Prince
3 Minute Read
Introduction:
 
Liferay Have given AUI Auto complete list from which we can populate matching values to user in input fields and data will be served from server with help of Ajax call.
 
AUI Auto Complete list need source property this specify the data which populated in input filtered.
 
This is very useful component in Liferay AUI so that we can populate exact matching result to end user instead of all available values.
 
Environment:
 
Liferay 6.2 +Tomcat 7.x+MySQL 5.1
 
Note:
 
The code will work for portal 6.2 version you can try for 6.1 too.
 
Download  Liferay AUI Auto Complete List with Ajax from following location
 
You can find source and war file
 
 
Portlet Screen-1:
 
 
Portlet Screen-2:
 
 
Procedure for deploy portlet:
 
You can use war file and directly place in your portal deploy folder and test or you can also use source to deploy portlet.
 
Once portlet is deployed successfully you can see the portlet in sample category name as  Liferay AUI Auto Complete List with Ajax.
 
Note:
 
Before use this portlet please Read entire Article and Use it
Go thorough following posts to get basic Understand about Liferay AUI Auto Complete List
 
 
Scenario: 1
 
Get all the data from server at one time and filter user desired values
 
In the last post I fetched the all values at one time to Input files and I am populating and when user type any string or letter It will display matching values.
 
Here only one time it requested to server through Ajax and gets all possible values to client side then AUI Auto Complete List will filter the values from all values at client side when user type something in input field.
 
Note:
 
Above scenario already covered in last post please has a look into following post.
 
 
Please read above article before start this article.
 
Scenario: 2
 
Get Matching Data from server for each user Input
 
In this scenario we will bring exact matching result from server for each time when use types something in input field.
 
Auto Complete List have capability to call back method for each user input so that we will use Ajax call to send request get the data from server.
 
I just took User table example so that when user type anything in input box I just search user based on email address that given by user.
 
Steps to implement
 
  1. Use AUI use function to load required AUI Java Script Modules.
  2. Create AUI Auto Complete List and pass required options
  3. Implement AUI IO Ajax in AUI Auto Complete List call back function
  4. Implement Server Resource Method in Portlet Action class to search data from user table.

 

Note:
 
We will use Server Resource method in portlet action class to server JSON Data and we will use Dynamic Query API to search user data from database.
 
The following is example Code in JSP page.
 
<%@page import= "com.liferay.portal.kernel.util.Constants"%>
<%@ include file= "init.jsp"%>
<portlet:resourceURL var= "getUsers">
       <portlet:param name= "<%=Constants.CMD%> " value= "get_users" />
</portlet:resourceURL>
<h2> Liferay Auto Complete List with  Ajax</h2><br/>
<aui:input id= "myInputNode" name= "myInputNode" label= "User Email"
       helpMessage= "Type User Email address in Input Box" />
<aui:script>
AUI().use(' autocomplete-list',' aui-base',' aui- io-request',' autocomplete-filters',' autocomplete- highlighters',function (A) {
var testData;
new A.AutoCompleteList({
allowBrowserAutocomplete: 'true',
activateFirstItem: 'true',
inputNode: '#<portlet:namespace />myInputNode',
resultTextLocator:'email',
render: 'true',
resultHighlighter: 'phraseMatch',
resultFilters:['phraseMatch'],
source:function(){
var inputValue=A.one("#<portlet:namespace />myInputNode").get('value');
var myAjaxRequest=A.io.request('<%=getUsers.toString()%>',{
dataType: ' json',
method:'POST',
data:{
<portlet:namespace />userEmail:inputValue,
},
autoLoad:false,
sync:false,
on: {
success:function(){
var data=this.get('responseData');
testData=data;
}}
});
myAjaxRequest.start();
return testData;},
});
});
</aui:script>
 
Note:
 
When we use AUI IO Ajax call in Auto Complete List we need to first define AUI IO request and we need to start Ajax call with start method.
 
When we manually start Ajax call we need to make  autoLoada false.
 
Go through following link more about AUI IO Request
 
 
The following sample code in Portlet Action Class
 
public  class LiferayAUIAutoCompleteListWithAjaxAction  extends MVCPortlet {
@Override
public  void serveResource(ResourceRequest resourceRequest,
ResourceResponse resourceResponse)  throws IOException,
PortletException {
String cmd = ParamUtil. getString(resourceRequest, Constants. CMD);
System. out.println("Constants.CMD: " + cmd);
if (cmd.equals("get_users")) {
getUsers(resourceRequest, resourceResponse);
}}
private  void getUsers(ResourceRequest resourceRequest,
ResourceResponse resourceResponse)  throws IOException,
PortletException {
JSONArray usersJSONArray = JSONFactoryUtil. createJSONArray();
ThemeDisplay  themeDisplay = (ThemeDisplay) resourceRequest.getAttribute(WebKeys. THEME_DISPLAY);
String userEmail = ParamUtil. getString(resourceRequest, "userEmail");
System. out.println("=====00000========" + userEmail);
DynamicQuery userQuery = DynamicQueryFactoryUtil. forClass(User. class,
PortalClassLoaderUtil. getClassLoader());
Criterion criterion = RestrictionsFactoryUtil. like("emailAddress",
StringPool. PERCENT + userEmail + StringPool. PERCENT);
userQuery.add(criterion);
JSONObject userJSON =  null;
System. out.println("=====1111========" + userQuery.toString());
try {
List<User> userList =  UserLocalServiceUtil.dynamicQuery(userQuery);
System. out.println("=====222========" + userList.size());
for (User user : userList) {
userJSON = JSONFactoryUtil. createJSONObject();
userJSON.put("userId", user.getUserId());
userJSON.put("email", user.getEmailAddress());
userJSON.put("firstName", user.getFirstName());
usersJSONArray.put(userJSON);
}}  catch (Exception e) {
}
PrintWriter out = resourceResponse.getWriter();
out.println(usersJSONArray.toString());
}
}
 
Note:
 
In the above code we used Liferay Dynamic query to search user data from table, this pretty good mechanism and this is alternative to custom sql in liferay.
 
Related Articles:
 
 
 
 
Reference Links:
 
 
 
 
 
Author
Page Comments
thumbnail
Jignesh Vachhani
10 Years Ago
Does this code working proper ? as in my case auto complete opens once get response from AJAX call and its not able to open dropdown quickly.
Please sign in to reply.

Related Assets...

No Results Found

More Blog Entries...