来自文本源的 jQuery-ui-autocomplete

Question

我尝试使用自动完成jquery-ui脚本，但从文档中它解释了远程源必须返回json数据，它不是在谈论纯文本< /strong>回应， 我在 jsp/servlet 中开发我的应用程序，但我不知道如何创建 json 数据。

所以我发现了另一个 jquery 自动完成插件 --> java 自动完成功能

本教程和脚本效果很好，但脚本没有我需要的相同选项。 我尝试保留相同的 getdata.jsp 和 servlet 页面以适应 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;
}
}

我希望任何人都可以帮助我

Answer 1

首先从 此位置。

现在要返回 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

您可以从 此处：

要将 arraylist 转换为 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;

Answer 2

了解如何创建 JSON。它正在取代 XML 作为信息交换媒介。

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

Answer 3

您应该从 json.org 开始，然后决定是否要首先返回 JSON 数组或对象。

jQuery UI autocomplete 是一个非常灵活的插件，我认为最简单的解决方案是从您的JSP 以便利用该插件。

我发现 json-lib 非常容易运行。您需要下载它和依赖项（commons-collections，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 UI 自动完成功能也可以与 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);
%>