Liferay auto complete field example

• Create field for auto complete

          <div id="autoCompleteDiv">

               <aui:input type="text" name="xyz" id="txtAutoComplete" label="Auto Complete Field" />

          </div>

         NOTE :- You can use <span> also insted of <div>

• Create Resource URL

         <portlet:resourceURL var="autoCompleteName" id="resourceId" />

• Write AUI script for auto complete field

         <aui:script use="aui-autocomplete, autocomplete-filters, autocomplete-highlighters">

                  var dataSource = new A.DataSource.IO(

                  {

                        source: '<%=autoCompletName.toString()%>'

                  });

                  var autocomplete = new A.AutoComplete(

                  {

                             dataSource: dataSource,

                             matchKey: 'name',

                             schema: {

                             resultListLocator: 'response',

                             resultFields: ['key', 'name']

                  },

                    schemaType:'json',

                    contentBox: '#autoCompleteDiv',

                    input:'#<portlet:namespace />txtAutoComplete',

                    typeAhead: false

                   });

                autocomplete.generateRequest = function(query) {

                         return {

                             request: '&keywords=' + query

                         };

                 }

                 autocomplete.render();

                });

         </aui:script>

• Write Resource method that serve to resource URL

          @ResourceMapping("resourceId")

   public void serveResource(ResourceRequest request, ResourceResponse response)

          {

               JSONObject json = JSONFactoryUtil.createJSONObject();

              JSONArray results = JSONFactoryUtil.createJSONArray();

             String keyword = ParamUtil.getString(resourceRequest, DisplayTerms.KEYWORDS);

             List filteredEntries = getFilteredEntries(keyword);

            for (Object entries : filteredEntries)

            {

               Object[] entry = (Object[]) entries;

               JSONObject listEntry = JSONFactoryUtil.createJSONObject();

              listEntry.put("key", Long.parseLong("" + entry[0]));

              listEntry.put("name", "" + entry[1]);

              results.put(listEntry);

          }

           json.put("response", results);

           PrintWriter writer = resourceResponse.getWriter();

           writer.print(json.toString());

        }

        private static List getFilteredEntries(String query) throws SystemException

       {

            List entries = null;

            DynamicQuery xzyQuery = DynamicQueryFactoryUtil.forClass(Xyz.class);

            if (Validator.isNotNull(query))

           {

             xzyQuery.add(RestrictionsFactoryUtil.ilike("title", "%" + query + "%"));    

         

             ProjectionList projectionList = ProjectionFactoryUtil.projectionList();

             projectionList.add(ProjectionFactoryUtil.property("xyzId"));

             projectionList.add(ProjectionFactoryUtil.property("title"));

             xzyQuery.setProjection(projectionList);

              entries = XyzLocalServiceUtil.dynamicQuery(xzyQuery);

            }

           return entries;

        }

NOTE :- Here I used "@ResourceMapping("resourceId")" because I used Spring, make appropriate changes as per your requirement to call the " serveResource(...)" method.