Jquery Autocomplete 显示一个空列表

Posted 2023-02-24

【中文标题】Jquery Autocomplete 显示一个空列表

【英文标题】：Jquery Autocomplete showing an empty list

【发布时间】：2017-03-29 12:49:29

【问题描述】：

编辑 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 Autocomplete，查询脚本。

列表显示与结果一样多的行（当我将脚本设置为返回 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 输入、数据库和响应门面）：

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

      

【问题讨论】：

一切都适用于这个例子：jqueryui.com/autocomplete 所以不存在资源问题。这显然是一个数据格式问题，我在那里挖掘

【参考方案1】：

看看http://api.jqueryui.com/autocomplete/#option-source。它指出数据必须采用格式

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

您的示例数据项没有这些属性（标签或值）。

您可以修改服务器端脚本以输出正确的格式，或者如果您不能/不会这样做，您可以使用插件中的 source-as-a-function 选项来编写一个函数转换数据。

【讨论】：

这将适用于数组响应（编辑：根据文档）。由于我的源是一个字符串（“/search/autocomplete”），它需要一个 json 格式的响应，脚本给出了

对不起我的错误！响应确实应该是 json ，但仍按您所说的那样格式化。我有多个值来获取不只是一个所以这就是为什么我不明白为什么坚持标签->值格式，但这属于另一个问题。