JQuery UI 自动完成 Ajax PHP MYSQL 不显示结果

Question

我已经实现了 JQuery Ui autocomplete 函数来显示来自 database 的内容，使用下面的代码

脚本

<script>
$(function() {
$( "#query" ).autocomplete({
  source: 'search.php'
});
});
</script>

HTML

<div class="col-md-9 col-sm-8 col-xs-8 " >
  <input style="width:100%;"class="form-control"  id="query" placeholder="Search" type="text">       
</div>

当我运行以上时，我在 span notification

内得到以下结果

<span role="status" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible">
<div style="display: none;">
 3 results are available, use up and down arrow keys to navigate.</div>
<div style="display: none;">
4 results are available, use up and down arrow keys to navigate.</div>
<div>4 results are available, use up and down arrow keys to navigate.</div></span>

但是自动完成 UL>li 字段没有任何值

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: none; top: 902.452px; left: 72.7257px; width: 372px;">
<li class="ui-widget-content ui-menu-divider"></li>
<li class="ui-widget-content ui-menu-divider"></li>
<li class="ui-widget-content ui-menu-divider"></li>
<li class="ui-widget-content ui-menu-divider"></li>
</ul>

这是我能看到的

这是我在 chrome ->Network

中得到的结果

[{name: "asa"}, {name: "Abhijit Das"}, {name: "Abhijit Das"}, {name: "Abhijit Das"}]

Answer 1

正如@marmeladze 所建议的，您的问题很可能是 php 代码的响应格式。根据 https://jqueryui.com/autocomplete/ 你应该有一个像这样的简单数组：

[
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++"
];

根据http://api.jqueryui.com/autocomplete/支持多种类型：

Array: An array can be used for local data. There are two supported formats: An array of strings: [ "Choice1", "Choice2" ] An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ] The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label.

远程服务器 (https://jqueryui.com/autocomplete/#remote) 的另一个示例：

[
  {"id":"Nycticorax nycticorax",
   "label":"Black-crowned Night Heron",
   "value":"Black-crowned Night Heron"},
  {"id":"Corvus cornix",
   "label":"Hooded Crow",
   "value":"Hooded Crow"}
]

JQuery UI 自动完成 Ajax PHP MYSQL 不显示结果

JQuery UI autocomplete with Ajax PHP MYSQL not displaying result

php

mysql

jquery

jquery-ui-autocomplete