<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/black-tie/jquery-ui.css">
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$("#auto").autocomplete({
source: ['hi', 'bye', 'foo', 'bar'],
change: function (event, ui) {
if (ui.item) {
$("#message").text("user selected " + ui.item.value + " from list.");
} else {
$("#message").text("user entered " + this.value);
}
}
});
});
</script>
</head>
<body>
<input type="text" id="auto" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<span id="message">user selected bye from list.</span>
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 22px; left: 0px; display: none; width: 193px;"><li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">bye</a></li><li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">bar</a></li></ul></body></html>
我想将 jquery 的源代码更改为 abc.php 。它必须从数据库中获取数据。如何更改上面的代码自动完成。如何从数据库中获取自动编译日期。请帮助我解决此问题。
你需要select
事件而不是change
$("#auto").autocomplete({
source: ['hi', 'bye', 'foo', 'bar'],
select: function (event, ui) {
if (ui.item) {
$("#message").text("user selected " + ui.item.value + " from list.");
} else {
$("#message").text("user entered " + this.value);
}
}
});
演示
请参阅 API 文档
尝试从 PHP 数据源获取数据:
$( "#auto" ).autocomplete({
source: "abc.php",
select: function( event, ui ) {
console.log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
如果你看一下jquery ui页面(https://jqueryui.com/autocomplete/#remote(上的例子,你只需要将源代码更改为:
source: "abc.php"
要记住的两件事:
- 自动完成功能将名为
term
的参数发送到您的 URL,其中包含自动函数的输入值。 - 自动完成需要对象列表作为响应,这些对象具有两个属性:
label
(用于显示(和value
(用于标识显示的值(。如果label
不存在,它将改用value
。