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

Question

我已经实现了 JQuery Ui autocomplete 功能，以使用以下代码显示数据库中的内容

脚本

<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"}
]