我在尝试扩展jQuery自动完成功能，使得默认情况下特定的项目获得焦点。开箱即用的功能效果还不错，但并非完美。使用autoFocus选项，可以自动将焦点放在第一个项目上。
$( "#input" ).autocomplete({
source: "autocomplete.php",
minLength: 1,
autoFocus: true
});
不过，我希望能够更好地控制哪个项目获得焦点。如果用户输入“eng”，而我的数据源返回的相关项目如下：
我希望第三项英语默认获得焦点（即实际以用户输入开头的项目，即使我想显示其他结果）。理想情况下，我的数据源autocomplete.php将能够指示哪个项目应该是默认焦点。
有任何想法吗？我甚至不知道如何开始。
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"}]
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);
}
}
});
select属性。看起来这很简单，甚至可能类似于第一个示例中使用正则表达式的JavaScript代码。autoFocus要容易得多，您的更高排名将位于顶部，并且焦点将从那里开始。
http://jqueryui.com/autocomplete/#categories
这是一个你可以使用的概念来对结果进行排名：function rankResult($str, $term){
/* 0 is first letters, 1 is in first word, 2 is starts another word, 3 is in word not first word*/
$words=explode(' ', $str);
if(stripos($words[0],$term) !==false){
return stripos($words[0],$term)==0 ? 0 : 1;
}else{
$rank=3;
for( $i=1; $i< count( $words); $i++){
if(stripos($words[$i],$term)===0){
$rank=2;
}
}
return $rank;
}
}
$rank = rankResult('English', 'eng'); /*=> 0 */
array('American English','British English','English','Scots English','HasEngInIt');
Array
(
[0] => Array
(
[label] => American English
[rank] => 2
)
[1] => Array
(
[label] => British English
[rank] => 2
)
[2] => Array
(
[label] => English
[rank] => 0
)
[3] => Array
(
[label] => Scots English
[rank] => 2
)
[4] => Array
(
[label] => HasEngInIt
[rank] => 1
)
)