有一个简单的方法可以实现这个,利用
open
事件。你可以让客户端代码处理选择默认项,或者附加一个属性来选中你想要的项。我将介绍这两种选择:
聚焦于以某个术语开头的建议,并在客户端进行选择:
$("input").autocomplete({
source: ,
open: function (event, ui) {
var menu = $(this).data("uiAutocomplete").menu
, i = 0
, $items = $('li', menu.element)
, item
, text
, startsWith = new RegExp("^" + this.value, "i");
for (; i < $items.length && !item; i++) {
text = $items.eq(i).text();
if (startsWith.test(text)) {
item = $items.eq(i);
}
}
if (item) {
menu.focus(null, item);
}
}
});
基本思路是在自动完成菜单打开时执行以下操作:
- 构建一个正则表达式来查找以搜索词开头的单词。
- 遍历每个菜单项,并测试其文本与正则表达式匹配。如果找到匹配项,则停止遍历并存储该值。
- 如果我们检索到一个值,请使用菜单上的
focus
方法突出显示该项。
示例:http://jsfiddle.net/J5rVP/40/(尝试搜索英语或苏格兰英语)
代码使用本地数据源,但远程源也应该同样适用。
聚焦于以搜索词开头的建议,在服务器上选择
在上述示例的基础上,您可以调整发送数据的方式,以便在每次搜索时您的服务器端代码决定选择哪个项目。您可以通过仅在要选择的项目上指定附加属性来实现此目的。例如,您的JSON响应可能如下所示:
[{"label":"American English","select":true},{"label":"British English"},{"label":"English"},{"label":"Scots English"}]
请注意 "American English" 上的
select
属性。这告诉自动完成我们想默认选择该项。
然后,您需要更新小部件初始化代码以利用上述
open
事件。不过,这一次我们只是在搜索具有
select
属性的项。
$("input").autocomplete({
source: "autocomplete.php",
open: function (event, ui) {
var menu = $(this).data("uiAutocomplete").menu,
i = 0,
$items = $('li', menu.element),
item,
data;
for (; i < $items.length && !item; i++) {
data = $items.eq(i).data("ui-autocomplete-item");
if (data.select) {
item = $items.eq(i);
}
}
if (item) {
menu.focus(null, item);
}
}
});
示例: http://jsfiddle.net/J5rVP/42/
请注意,在上述示例中,始终选择
美式英语。由于自动完成每次用户键入时都会发出新请求,因此您的服务器将响应不同的建议数据,因此选择的项目将不同。
此外,我不知道PHP,因此无法说明如何实现向JSON添加
select
属性。看起来这很简单,甚至可能类似于第一个示例中使用正则表达式的JavaScript代码。