JQuery-ui-autocomplete from text source

Question

I am trying to use an autocomplete jquery-ui script, but the documentation explains that the remote source should return json data , this is not talking about plain text , and I am developing my application in jsp / servlet and I do not know how to create json data.

So, I discovered another jquery autocomplete plugin -> autocomplete function with java

This tutorial and script work fine, but the script does not have the same parameters that I need. I am trying to keep the same getdata.jsp and servlet pages to adapt to jquery-ui-autocomplete by simply changing the script link, and firebug will tell me the correct answer to the request, but it will not be displayed !

ScreenShot firebug

JavaScript call:

<script> $(function() { $( "#responsable" ).autocomplete({ source: "getdata.jsp", minLength: 2 }); }); </script> 

here is the getdata.jsp file:

 <%@page import="java.util.Iterator"%> <%@page import="java.util.List"%> <%@page import="fr.myldap.model.*"%> <% PersonneDB db = new PersonneDB(); String query = request.getParameter("term"); List<Personne> personnes = db.getData(query); Iterator<Personne> iterator = personnes.iterator(); while(iterator.hasNext()) { String personne = (String)iterator.next().getNomComplet(); out.println(personne); } %> 

and here is the PersonneDB class that returns a list of faces

 package fr.myldap.model; import java.util.ArrayList; import java.util.List; public class PersonneDB { private LDAPInterneDao piDao; private LDAPExterneDao peDao; public PersonneDB() { ContextVar var= new ContextVar(); piDao = var.getPiDao(); peDao = var.getPeDao(); } public List<Personne> getData(String query) { List<Personne> matched = new ArrayList<Personne>(piDao.findByName(query)); matched.addAll(peDao.findByName(query)); return matched; } } 

I hope someone can help me

Answer 1

First of all, download the json library for java from this location.

Now, to return the JSON data, you need to follow its own format, for example:

 { "firstName": "John", "lastName": "Smith", "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": 10021 }, "phoneNumbers": [ "212 732-1234", "646 123-4567" ] } 

As you can see above, json data can have a key pair: value, an object can be stored inside { } , an array can be stored in [ ] , etc.

Now, to convert your response to a JSON object, you need to import the following statement into a jsp file:

 import net.sf.json.JSONObject; 

(it may vary depending on what you download, you can study javadoc for more details)

Now, consider the following code to create a json object and return it:

  JSONObject object=new JSONObject(); object.put("name","Amit Kumar"); object.put("employeeList",employeeList); .... .... System.out.println("json object = "+object); return object; 

It automatically converts the key: value pair to the correct JSON object ...

UPDATE:

Required Libraries:

 commons-lang 2.3 commons-beanutils 1.7.0 commons-collections 3.2 commons-logging 1.1 ezmorph 1.0.4.jar json-lib-2.2.2-jdk15.jar 

You can download all from here :

To convert arraylist to json, use the following code example:

 List mybeanList = new ArrayList(); mybeanList.add(myBean1); mybeanList.add(myBean2); JSONArray jsonArray = JSONArray.fromObject(mybeanList); System.out.println("==== : "+jsonArray); Map map = new HashMap(); map.put("beanlist", jsonArray); JSONObject jsonObject = JSONObject.fromObject(map); return jsonObject; 

Answer 2

Learn how to create JSON. It replaces XML as an information exchange medium.

http://www.roseindia.net/tutorials/json/json-jsp-example.shtml

Answer 3

You should start with json.org and decide if you want to return an array or JSON object first.

jQuery UI autocomplete is a very flexible plugin, and I think the easiest solution would be to return JSON from your JSP to use the plugin.

I found json-lib very easy to work with. You will need to load this and the dependencies ( collective collections , commonslang , commons-logging , ezmorph , commons-beantils ) and add them to the WEB-INF\lib .

Then you can use something simple, like JSONArray :

 <%@page import="java.util.*, net.sf.json.*"%> <% List<String> data = new ArrayList<String>(); data.add("John"); data.add("Paul"); data.add("George"); data.add("Ringo"); JSONArray json = JSONArray.fromObject(data); out.println(json); %> 

which returns ["John","Paul","George","Ringo"]

Autocomplete jQuery UI will also work with JSONObject if you want to return a <key, value> pair instead.

For completeness, my WEB-INF\lib contains the following:

 commons-beanutils-1.8.3.jar commons-collections-3.2.1.jar commons-lang-2.6.jar commons-logging-1.1.1.jar ezmorph-1.0.6.jar json-lib-2.4-jdk15.jar 

Edit: Updated JSP example

 <%@page import="java.util.*, net.sf.json.*"%> <%! public class Person { private String name; public Person(String name) { this.name = name; } public String getName() { return name; } } %> <% List<Person> data = new ArrayList<Person>(); data.add(new Person("John")); data.add(new Person("Paul")); data.add(new Person("George")); data.add(new Person("Ringo")); JSONArray json = JSONArray.fromObject(data); out.println(json); %>