JQuery UI Autocomplete and Spring mvc

Posted by loongest on October 20th, 2010

I had spending 2 days to figure out how’s it work, and finally i’m able to write some sample code.
The example was using flexjson 1.9.1 and spring portlet as platform.

Source code

Note * Don’t mess up the jquery autocomplete with jquery ui autocomple plugin.

JSON Data

1. {"members":
2. [{"name":"Alex","id":1},
3.  {"name":"Agnes","id":2},
4.  {"name":"Alan","id":3},
5.  {"name":"John","id":4},
6.  {"name":"Jason","id":5},
7.  {"name":"Maria","id":6}]}

Base on the json data show on above, we analyze it has 2 POJO.
1) A plain object contain a list of member object

1. public static class MembersData {
2.      private List<Member> members;
3.  
4.      @JSON
5.      public List<Member> getMembers() {
6.           return members;
7.      }
8.  
9.      public void setMembers(List<Member> members) {
10.           this.members = members;
11.      }
12. }

2) A member object contains 2 fields name and id.

1. public static class Member {
2.         private String name;
3.         private String id;
4.         @JSON
5.         public String getName() {
6.                 return name;
7.         }
8.         public void setName(String name) {
9.                 this.name = name;
10.         }
11.         @JSON
12.         public String getId() {
13.                 return id;
14.         }
15.         public void setId(String id) {
16.                 this.id = id;
17.         }
18. }

@ResourceMapping

In our controller, we need to have a @resourcemapping method to handler the resource request.
Next, we will get value by calling the parameter “term”.

1. @ResourceMapping
2. public void doAjax(ResourceRequest request,
3.         ResourceResponse response) throws Exception
4. {
5.      String term = PortletRequestUtils.getStringParameter(request, "term");
6.       PrintWriter out = response.getWriter();
7.       response.setContentType("json");
8.       response.setCharacterEncoding("utf-8");
9.       out.print(getRefreshData(term));
10. }
11.  
12. private String getRefreshData(String term) throws Exception {
13.         JSONSerializer serializer = new JSONSerializer();
14.         List resultset = new MemberDB().getData(term);
15.  
16.         MembersData  list = new MembersData();
17.         List members = new ArrayList();
18.  
19.         Member member;
20.         for(int i=0; i < resultset.size() ; i++){
21.                 member = new Member();
22.                 member.setId(String.valueOf(i));
23.                 member.setName(resultset.get(i));
24.                 members.add(member);
25.         }
26.         list.setMembers(members);
27.         return serializer.serialize(list);
28. }

Dummy database

1. public class MemberDB {
2.        private int total;
3.        private String data =
4.                   "Alex,Agnes,Alan,Bjok,Bill,John,Jason,Maria,Man";     
5.  
6.        private List members;
7.  
8.        public MemberDB() {
9.                 members = new ArrayList();
10.                 StringTokenizer st = new StringTokenizer(data, ",");
11.  
12.                 while(st.hasMoreTokens()) {
13.                         members.add(st.nextToken().trim());
14.                 }
15.                 total = members.size();
16.         }
17.  
18.         public List getData(String query) {
19.                 String member = null;
20.                 query = query.toLowerCase();
21.                 List matched = new ArrayList();
22.                 for(int i=0; i < total; i++) {
23.                         member = members.get(i).toLowerCase();
24.                         if(member.startsWith(query)) {
25.                                 matched.add(members.get(i));
26.                         }
27.                 }
28.                 return matched;
29.         }
30. }

JSP & JQuery

First, download and import the jquery ui plugin and css into project folder, and refer the demo from jquery ui site

1. <script src="${pageContext.request.contextPath}/js/jquery-1.4.2.min.js" type="text/javascript"></script>
2.  
3. <script src="${pageContext.request.contextPath}/js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
4.  
5. <script src="${pageContext.request.contextPath}/js/jquery.ui.autocomplete.js" type="text/javascript"></script>
6.  
7. <link href="${pageContext.request.contextPath}/css/jquery-ui.css"
8. rel="stylesheet" type="text/css" />
9.  

In your jsp, write some simple html like below :

1.  
2. <label>
3.         <span> Member : </span>
4.         <input type="text" id="member" name="member" />                                        
5. </label>       
6.  

Write jquery on the botton :

1.  
2. <portlet:resourceURL var="jsonUrl" />   
3. <script type="text/javascript">  
4.        
5. jQuery(document).ready(function() {    
6.       jQuery("#member").autocomplete({
7.              source: function(request, response) {
8.               jQuery.ajax({
9.                         url : ‘${jsonUrl}’,
10.                         dataType : ‘json’,
11.                         data : {
12.                             term : request.term
13.                         },
14.                         success : function(data) {
15.                             response(jQuery.map(data.members, function(item) {
16.                                  return {
17.                                     label: item.name,
18.                                     value: item.name
19.                                  }
20.                             }))
21.                         }
22.                  })
23.              },
24.              minLength : 2,
25.              open: function() {
26.                 jQuery(this).removeClass("ui-corner-all").addClass("ui-corner-top");
27.              },
28.              
29.              close: function() {
30.                 jQuery(this).removeClass("ui-corner-top").addClass("ui-corner-all");
31.              }
32.        });
33. });
34. </script>
35.  

Done !

Posted in Autocomplete, JQuery, Spring MVC

« Caused by: java.lang.NoSuchMethodError: org.objectweb.asm.ClassWriter.(Z)V

PortletPreference As Database »

You can leave a response, or trackback from your own site.

7 Responses to “JQuery UI Autocomplete and Spring mvc”

1. Pinkesh Gandhi says:

   December 1, 2010 at 6:52 pm

   Hi,

   Can you please provide a source code for this example?

   I really stuck with the @ResourceMapping, I am trying to return plain text as a response, But i can not get any response on a success callback function of jquery ajax.Instead of it, I got error “Syntax Error” on firfox browser’s error console.

   Please help on this.

   If you can provide the source code of this example then it would be really helpful for me.
2. loongest says:

   December 3, 2010 at 2:45 pm

   Hi, source code was added.
3. rendi says:

   December 8, 2010 at 8:57 pm

   Hi what if I have JSON data nested? such as this :
   {“list”: [
   {
   "id": 10,
   "Name": "Spiderman",
   "Status": "Untouchable",
   "dept": {
   "deptId" : 2,
   "deptName": "SuperHuman",
   "manager" : "The Avanger"
   }
   }, .... ...
   ]}
   I want to display (name,deptName). Whats your suggestion?

   Rgds,
4. Troy says:

   December 9, 2010 at 1:01 pm

   Hi,
   Can you explain return response
   [code]
   success : function(data) {
   response(jQuery.map(data.members, function(item) {
   return {
   label: item.id, // ----> I made changes
   value: item.name
   }
   }))
   }
   [/code]

   what if i want to display member ID to another input text based on selection on name in autocomplete?

   I try include as below :
   [code]
   select: function( event, ui ) {
   var x=$('#memberID').val(ui.item.label);
   }
   [/code]

   but unfortunately it said ui.item.label is undefined. any trick here?
5. loongest says:

   December 13, 2010 at 12:06 pm

   Hi, i’m not good in explain. But you may refer to my new post http://loongest.com/spring-mvc/jquery-ui-autocomplete-and-spring-mvc-explain/ i hope that may help you to understand.
6. loongest says:

   December 13, 2010 at 12:13 pm

   rendi, if your purpose is only for “display” like joining name + department. the most simple way to do this is pre-process the display information from your controller before you pass back to the jquery. Otherwise, you may need extra process to extract the json data into piece by piece before the return statement.
7. shan rast says:

   September 10, 2011 at 2:56 am

   change succes function as

   success : function(data) {
                               response(jQuery.map(data.members, function(item) {
                                    return {
                                       label: item.name,
                                       value: item.name
                                       id   :  item.id
                                    }
                               }))
                           }
   add this
   select : function(event, ui) {
         $("#hiddenfield").val(ui.item.id);
              },
   

Leave a Reply

Click here to cancel reply.

Name (required)

Mail (will not be published) (required)

Website

Security Code: