使用Ajax PHP MYSQL的jQuery UI自动完成不显示结果

银狐

我已经实现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"}]

keiv.fly

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

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

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

数组：数组可用于本地数据。支持两种格式：字符串数组：[“ Choice1”，“ Choice2”]具有标签和值属性的对象数组：[{标签：“ Choice1”，值：“ value1”}，...]标签属性显示在建议菜单中。当用户选择一个项目时，该值将插入到输入元素中。如果仅指定一个属性，则将同时使用这两个属性，例如，如果仅提供值属性，则该值也将用作标签。

远程服务器的另一个示例（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"}
]

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。