JQuery-UI-автозаполнение из источника текста - PullRequest
Новая
       4

JQuery-UI-автозаполнение из источника текста

4 голосов
/ 27 апреля 2011

Я пытаюсь использовать сценарий автозаполнения jquery-ui , но из документации объясняется, что удаленный источник должен возвращать данные json , речь не идет о обычном тексте ответ, и я разрабатываю свое приложение в jsp / servlet , и я не знаю, как создавать данные json.

Итак, я обнаружил другой плагин автозаполнения jquery -> функция автозаполнения с java

Этот урок и скрипт отлично работают, но у скрипта не те опции, которые мне нужны. Я пытаюсь сохранить те же страницы getdata.jsp и сервлета для адаптации к jquery-ui-autocomplete, просто меняя ссылку скрипта, и firebug говорит мне правильный ответ на запрос, но это не отображается !

Скриншот Firebug

JavaScript вызов: 

<script>
$(function() {

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

вот файл getdata.jsp: 

<%@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);
}

%>

и вот класс PersonneDB, который возвращает список людей 

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;
}
}

Я надеюсь, что кто-нибудь может мне помочь

Ответы [ 3 ]

5 голосов
/ 27 апреля 2011

Прежде всего загрузите библиотеку json для java из этого местоположения.

Теперь, чтобы вернуть данные JSON, вам нужно использовать собственный формат, например: 

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

Как вы можете видеть выше, данные json могут иметь пару ключ: значение, объект может храниться в { }, массив может храниться в [ ] и т. Д.

Теперь для преобразования вашихВ ответ на JSON-объект вам необходимо импортировать следующую инструкцию в ваш jsp-файл: 

import net.sf.json.JSONObject;

(это может измениться в зависимости от загружаемой библиотеки, вы можете изучить javadoc для более подробной информации)

Теперь посмотрите на следующий код, чтобы создать объект json и вернуть его: 

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

Он автоматически преобразует пару ключ: значение в правильный объект JSON ...

ОБНОВЛЕНИЕ:

Необходимые библиотеки: 

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

Вы можете скачать все с здесь :

Для преобразования массива в json,используйте следующий пример кода: 

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;
2 голосов
/ 27 апреля 2011

Вы должны начать с json.org и решить, хотите ли вы сначала вернуть массив или объект JSON.

jQuery UI autocomplete - очень гибкий плагин, и я думаю, что самым простым решением было бы вернуть JSON из JSP, чтобы использовать плагин.

Мне показалось, что json-lib очень легко запустить. Вам нужно скачать это и зависимости ( commons-collection , commons-lang , commons-logging , ezmorph , commons-beantils ) и добавьте их в каталог WEB-INF\lib.

Затем вы можете использовать что-нибудь простое, например 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);
%>

, который возвращает ["John","Paul","George","Ringo"]

Автозаполнение пользовательского интерфейса jQuery также будет работать с JSONObject , если вы хотите вместо этого вернуть пару <key, value>.

Для полноты, мой каталог WEB-INF\lib содержит следующее: 

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

Редактировать: Обновленный пример JSP 

<%@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);
%>
2 голосов
/ 27 апреля 2011

Узнайте, как создать JSON. Он заменяет XML в качестве средства обмена информацией.

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

...