Hello Guys,
Liferay provides inbuilt auto complete or auto-suggestion. Autocomplete is an inbuilt function of alloy script which is allowed to customize the auto-complete list (i.e UI and action)
Liferay AUI has had javascript component, which is an Auto Complete List. It helps suggest or populate matching values in the input field while typing something in the input field.
Follow below steps :
Step 1 : Create JSP page and put below code
<%@page import="com.liferay.portal.kernel.util.Constants"%>
<portlet:actionURL var="getlocation" name="getlocation">
<portlet:param name="<%=Constants.CMD%>" value="get_places" />
</portlet:actionURL>
<aui:input id="inputField" name="inputField" label="Location"
helpMessage="Type Some text in Input" />
<aui:script>
AUI().use('autocomplete-list','aui-base','aui-io-request','autocomplete-filters','autocomplete-highlighters',function (A) {
A.io.request('<%=getlocation%>',{
dataType: 'json',
method: 'GET',
on: {
success: function() {
new A.AutoCompleteList(
{
allowBrowserAutocomplete: 'true',
activateFirstItem: 'true',
inputNode: '#<portlet:namespace />inputField',
resultTextLocator: 'name',
render: 'true',
resultHighlighter: 'phraseMatch',
resultFilters:['phraseMatch'],
source:this.get('responseData'),
})
}}
});
});
</aui:script>
Step 2: Create Action or controller class and put below methods
@Override
public void getlocation(ActionRequest actionRequest, ActionResponse actionResponse) throws IOException, PortletException {
String cmd = ParamUtil.getString(actionRequest, Constants.CMD);
System.out.println("Constants.CMD: " + cmd);
if (cmd.equals("get_places")) {
getPlaceJson(actionRequest, actionResponse);
}
}
private void getPlaceJson(ActionRequest actionRequest, ActionResponse actionResponse) throws IOException, PortletException {
JSONArray jsonResults = JSONFactoryUtil.createJSONArray();
try {
String keyword = ParamUtil.getString(actionRequest, "keywords");
String searchPattern = keyword.replace("*", "%");
System.out.println("Keywords: " + searchPattern);
JSONObject jsonCells = JSONFactoryUtil.createJSONObject();
jsonCells.put("key", "1");
jsonCells.put("name", "Pune, India");
jsonResults.put(jsonCells);
jsonCells = JSONFactoryUtil.createJSONObject();
jsonCells.put("key", "2");
jsonCells.put("name", "New Delhi, India");
jsonResults.put(jsonCells);
jsonCells = JSONFactoryUtil.createJSONObject();
jsonCells.put("key", "3");
jsonCells.put("name", "Dehradun, India");
jsonResults.put(jsonCells);
} catch (Exception e) {
}
PrintWriter out=actionResponse.getWriter();
out.println(jsonResults.toString());
}
0 Comment(s)