jQuery的UI的自動完成

我嘗試使用自動完成的jQuery UI的腳本，但是從文檔它解釋說，遠程數據源必須返回一個JSON數據，這不是在談論純文本響應，和我在jsp/servlet中開發我的應用程序，我不知道如何創建json數據。jQuery的UI的自動完成

所以，我已經發現了其他的jQuery自動完成插件 - >autocomplete feature with java

本教程和腳本的工作很好，但劇本有我需要的不是相同的選項。我儘量保持相同getdata.jsp和servlet頁適應jQuery的UI的自動完成的只是改變腳本的鏈接，螢火蟲說我正確的響應請求但是這不顯示！

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

我希望任何人都可以幫到我

來源

2011-04-27 FAjir

首先從this位置下載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瞭解更詳細的lib ）

現在看看下面的代碼，創建一個JSON對象，並返回它：

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

它會自動轉換的關鍵是：值配對成正確的JSON對象...

UPDATE：

所需的庫：

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

您可以從here下載所有：

要的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;

來源

2011-04-27 08:22:34 Nirmal

謝謝你，我有json庫，我已經理解你的解釋，但我必須返回多個人自動完成，我有一個ArrayList的人我需要，我想返回一個這個對象列表的JSON數據！ – FAjir 2011-04-27 08:36:32

看到我更新的答案... – Nirmal 2011-04-27 08:42:59

也返回json對象不是結束，你需要解析客戶端返回的JSON對象...因此，探索那部分... – Nirmal 2011-04-27 08:46:03

瞭解如何創建JSON。它正在取代XML作爲信息交換媒介。

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

來源

2011-04-27 07:56:32 Homer6

確定，但其中JSON數據的語法和類型必須怎麼用？（陣列，對象，字符串）例如： JSON { personne1 { attR1位{} attR2位{} ... } personne2 { attR1位{} attR2位{} } } ... – FAjir 2011-04-27 07:59:31

，我不知道如何返回一個json對象到查詢 – FAjir 2011-04-27 08:02:54

這是一個過分廣泛的陳述。 XML絕對有其地位，並且很長一段時間不會過時。然而，在這個例子中，我同意JSON是最簡單的解決方案。 +1一個很好的鏈接，以及 – andyb 2011-04-27 08:39:13

您應該從json.org開始，然後決定是否要先返回JSON數組或對象。

jQuery UI autocomplete是一個非常靈活的插件，我認爲最簡單的解決方案是從您的JSP中返回JSON以利用插件。

我發現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用戶界面自動完成，如果你想返回一個<key, value>對代替也將與一個JSONObject作用。

爲了完整起見，我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); 
%>

來源

2011-04-27 08:33:36 andyb

jQuery的UI的自動完成

回答

相關問題