LiferayZone: jQuery Autocomplete in Liferay Custom Portlet

In the following post we are going to implement jQuery Autocomplete in our custom portlet.

1. create the service.xml file-

	<service-builder package-path="com.sample.harish">
	<author>harish.kumar</author>
	<namespace>harish</namespace>
	<entity name="Student" local-service="true" remote-service="true">

	<column name="studentId" type="long" primary="true" />
	<column name="studentName" type="String" />
	<column name="course" type="String" />

	<finder return-type="Collection" name="CourseLike">
	<finder-column name="course" comparator="LIKE" />
	</finder>

	</entity>
	</service-builder>

2. Add the finder method in StudentLocalServiceImpl class-

	public java.util.List<Student> findByCourseLike(
	java.lang.String course)
	throws com.liferay.portal.kernel.exception.SystemException {
	return StudentUtil.findByCourseLike(course);
	}

3. Put the jquery js files in docroot/js folder and add the following entries in liferay-portlet.xml file -

	<header-portlet-javascript>/js/jquery.min.js</header-portlet-javascript>
	<footer-portlet-javascript>/js/jquery-ui.min.js</footer-portlet-javascript>

4. view.jsp file-

	<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

	<portlet:defineObjects />

	This is the <b>JqueryAutocomplete</b> portlet.

	<portlet:resourceURL var="getAutoCompleteData" id="getAutoCompleteData" >
	<portlet:param name="action" value="autocompleteCall"/>
	</portlet:resourceURL>

	<portlet:actionURL name="submitCourse" var="courseUrl" />

	<STYLE TYPE="text/css" media="all">
	.ui-autocomplete {
	position: absolute;
	cursor: default;
	height: 100px;
	overflow-y: scroll;
	overflow-x: hidden;
	text-align:left;
	}
	</STYLE>

	<script type="text/javascript">

	function createAutoComplete(fieldName) {
	$('#' + fieldName).autocomplete({
	width: 300,
	max: 10,
	delay: 100,
	minLength: 1,
	minChars:2,
	autoFocus: true,
	cacheLength: 1,
	scroll: true,
	highlight: false,
	source: function(request, response) {
	$.ajax({
	url: "<%= getAutoCompleteData %>" + "&fieldName=" + fieldName,
	dataType: "json",
	data: request,
	success: function(data, textStatus, jqXHR) {
	var items = data;
	response(items);
	},
	error: function(jqXHR, textStatus, errorThrown) {
	console.log( textStatus);
	}
	});
	}
	});
	}

	$(document).ready(function() {
	createAutoComplete("course");
	});

	</script>
	<br/>
	<form name="fm" method="post" action="<%=courseUrl%>">
	<input type="text" name="course" id="course" value=""/> <br/><br/>
	<input type="submit" />
	</form>

5. Add the following methods in portlet class-

	@Override
	public void serveResource(ResourceRequest resourceRequest,
	ResourceResponse resourceResponse) throws IOException,
	PortletException {
	String action = ParamUtil.getString(resourceRequest, "action");
	if(action.equals("autocompleteCall"))
	{
	String fieldName = ParamUtil.getString(resourceRequest, "fieldName");
	String term = ParamUtil.getString(resourceRequest, "term");
	String res = getAutocompleteListData(fieldName,term);
	resourceResponse.getWriter().write(res);
	}
	}

	private String getAutocompleteListData(String fieldName, String term) {

	List<String> courseList = new ArrayList<String>();
	Gson gson = new Gson();
	List<Student> students = null;
	try {
	students = StudentLocalServiceUtil.findByCourseLike(term + "%");
	} catch (SystemException e) {
	e.printStackTrace();
	}
	if (Validator.isNotNull(students)) {
	for (Student stud : students) {
	courseList.add(stud.getCourse());
	}
	}
	return gson.toJson(courseList);
	}

	public void submitCourse(ActionRequest request, ActionResponse response)
	{
	String course = ParamUtil.getString(request, "course");
	System.out.println("Process Course: " + course);
	}

LiferayZone