jQuery-ui-autocomplete from text source

Question

I try to use autocomplete jquery-ui script, but from the documentation it's explain that the remote source must return a json data, it's not talking about plain text response, and I develop my application in jsp/servlet and I don't know how to create json data.

So I've discover an other jquery autocomplete plugin --> autocomplete feature with java

This tutorial and the script work great but the script has not same options that I need. I try to keep the same getdata.jsp and servlet pages for adapt to jquery-ui-autocomplete just changing the link of script, and firebug say me the correct response to the request but that's not displayed!

ScreenShot of 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 wich return the person list

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 anyone 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, something like :

{
    "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 key:value pair, object can be stored inside { }, array can be store in [ ] and so on.

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

import net.sf.json.JSONObject; 

(it may change depend on the lib that you are downloading, you can explore javadoc for more detail)

Now look at to 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 will automatically convert the key:value pair into 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 following sample code :

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;