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选项来编写函数转换数据。