jQuery的自動完成功能顯示一個空列表

Question

編輯2：甚至更好，多值工作

其實，一個只需簡單地給出一個「值」字段填寫框。不需要「id/label」字段，但需要value字段。這是工作：

foreach ($queries as $query) 
     { 
      $results[] = [ 
      'zip' => $query->zip, 
      'value' => $query->commune, 
      'libelle' => $query->libelle, 
      'lieudit' => $query->lieudit 
      ]; 
     } 
return Response::json($results); 

---

編輯：這裏是解決方案，這要歸功於Adyson的回答

腳本應該JSON格式，並返回

對象的數組label和value性能：

[ { label: "Choice1", value: "value1" }, ... ]

（jQuery API documentation）

因此，修改PHP這樣的腳本將工作：

foreach ($queries as $query) 
     { 
      $results[] = [ 
      'id' => $query->zip, 
      'value' => $query->commune, 
      ]; 
     } 
return Response::json($results); 

---

原來的問題

使用jQuery自動完成，查詢腳本。

列表中顯示爲有結果（當我把我的腳本返回X結果，有X行，以及在列表中）儘可能多的行：

但它不」用數據填充行。那裏出了什麼問題？

---

返回的數據是一些JSON：

Request URL:http://localhost:8000/search/autocomplete?term=750 
Request Method:GET 
Status Code:200 OK 
Remote Address:127.0.0.1:8000 
Response Headers 
view source 
Cache-Control:no-cache 
Connection:close 
Content-Type:application/json 
Date:Tue, 15 Nov 2016 14:53:07 GMT 
Host:localhost:8000 

這裏是數據：

[{"zip":"75004","commune":"PARIS 04","libelle":"PARIS","lieudit":""}, 
{"zip":"75005","commune":"PARIS 05","libelle":"PARIS","lieudit":""}, 
{"zip":"75003","commune":"PARIS 03","libelle":"PARIS","lieudit":""}, 
{"zip":"75006","commune":"PARIS 06","libelle":"PARIS","lieudit":""}, 
{"zip":"75008","commune":"PARIS 08","libelle":"PARIS","lieudit":""}, 
{"zip":"75012","commune":"PARIS 12","libelle":"PARIS","lieudit":""}, 
{"zip":"75015","commune":"PARIS 15","libelle":"PARIS","lieudit":""}, 
{"zip":"75016","commune":"PARIS 16","libelle":"PARIS","lieudit":""}, 
{"zip":"75017","commune":"PARIS 17","libelle":"PARIS","lieudit":""}, 
{"zip":"75010","commune":"PARIS 10","libelle":"PARIS","lieudit":""}, 
{"zip":"75018","commune":"PARIS 18","libelle":"PARIS","lieudit":""}, 
{"zip":"75001","commune":"PARIS 01","libelle":"PARIS","lieudit":""}, 
{"zip":"75009","commune":"PARIS 09","libelle":"PARIS","lieudit":""}, 
{"zip":"75014","commune":"PARIS 14","libelle":"PARIS","lieudit":""}, 
{"zip":"75002","commune":"PARIS 02","libelle":"PARIS","lieudit":""}, 
{"zip":"75007","commune":"PARIS 07","libelle":"PARIS","lieudit":""}, 
{"zip":"75011","commune":"PARIS 11","libelle":"PARIS","lieudit":""}, 
{"zip":"75013","commune":"PARIS 13","libelle":"PARIS","lieudit":""}, 
{"zip":"75019","commune":"PARIS 19","libelle":"PARIS","lieudit":""}, 
{"zip":"75020","commune":"PARIS 20","libelle":"PARIS","lieudit":""}] 

這裏是我的JS：

$(function(){ 
    $("#fromzip").autocomplete({ 
     source: "/search/autocomplete", 
     dataType: 'json', 
     minLength: 3, 
    }); 
    }); 

的HTML：

<input 
     id="fromzip" 
     name="fromzip" 
     type="text" 
     class="form-control" 
     placeholder="69003" 
     pattern=".{5}" 
     title="5 numbers zip" 
     maxlength="5" 
     required > 

而PHP（Laravel輸入，DB和響應門面）：

public function autocomplete(){ 
     $term = Input::get('term'); 
     $results = array(); 

     $queries = DB::table('zips') 
      ->where('zip', 'LIKE', $term.'%') 
      ->orWhere('libelle', 'LIKE', $term.'%') 
      ->take(30)->get(); 

     foreach ($queries as $query) 
     { 
      $results[] = [ 'zip' => $query->zip, 
      'commune' => $query->commune, 
      'libelle' => $query->libelle, 
      'lieudit' => $query->lieudit]; 
     } 

     return Response::json($results); 

     } 

Answer 1

看一看http://api.jqueryui.com/autocomplete/#option-source。它聲明數據必須採用格式

[ { label: "Choice1", value: "value1" }, ... ] 

您的示例數據項不具有這些屬性（標籤或值）中的任何一個。

您可以修改您的服務器端腳本以輸出正確的格式，或者如果您不能/不會這樣做，您可以使用插件中的source-as-a-function選項來編寫函數轉換數據。