JQuery UI 记忆式键入使用 Ajax PHP MYSQL 不显示结果

标签: jQuery MySQL PHP
发布时间: 2017/4/8 22:44:05
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我已经实现了 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>

这是我能够看到

enter image description here

这里是我得到的结果 chrome ->Network

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

解决方法 1:

@marmeladze 建议,作为你的问题很可能是 php 代码的响应格式。根据https://jqueryui.com/autocomplete/应该有简单的数组,如下所示︰

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

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

数组︰ 数组可用于本地数据。 有两种受支持的格式︰ 一个字符串数组: ["Choice1","选择 2"] 与标签和值的属性的对象的数组: [{标签:"Choice1",价值:"value1"},...] 标签属性将显示在建议菜单。值将插入 input 元素,当用户选择一个项目。如果指定一个属性,它将用于两个,例如,如果您提供只值属性,将还使用值作为标签。

与远程服务器 (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"}
]
官方微信
官方QQ群
31647020