May 8, 2013

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.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Post a Comment