Jquery自动填充显示空列表

时间:2016-11-15 15:06:00

标签: javascript php jquery json laravel-5

编辑2:更好,多个值有效

实际上,只需要给出一个填充框的“值”字段。不需要“id / label”字段,但需要值字段。这是有效的:

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

编辑:这是解决方案,感谢Adyson的回答

脚本应该是json格式并返回

  

具有labelvalue属性的对象数组:

     

[ { 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行):

jquery not returning data

但它没有用数据填充行。那里可能出了什么问题?

返回的数据是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);

      }

1 个答案:

答案 0 :(得分:2)

看看http://api.jqueryui.com/autocomplete/#option-source。它声明数据必须采用

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

您的示例数据项不具有这些属性(标签或值)。

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