Question

我有以下代码从外部源获取数据并显示自动完成列表：

function addSearchFieldFunctionality() {

//Clears the value "Search for Products" from the searchfield when clicked and added it back when blured        
$(".searchfield").focus(function(){  
    if($(this).attr("value") != "") $(this).attr("value", "");
}); 


$(".searchfield").autocomplete({
minLength: 1,
source:  "{{ path('SolrSearchBundle_search') }}",
focus: function( event, ui ) {
   $(this).val(ui.item.label);
        return false;
    },
select: function( event, ui ) {
   $(this).val(ui.item.label);
   window.location = "{{ path('CoreBundle_show_product', {'productId': ''}) }}"+"/" + ui.item.value
   return false;
},

open: function(){
    var $searchFieldId = $(this).attr('id');
    //console.log(this);
    $(".ui-autocomplete").append('<li class="ui-menu-item"><span class="notFound"><a class="notFoundItem ' + $searchFieldId + '" href="#">Miss your Product? We\'ll find it</a></span></li>');

}



}).data( "autocomplete" )._renderItem = function( ul, item ) {

var a = $('<a>', {
    href: "{{ path('CoreBundle_show_product', {'productId': ''}) }}"+"/" + item.value,
    text: item.label,
    "class" : "mySearchClass" 
});

var b = $('<a>', {
    href: "{{ path('CoreBundle_add_product', {'productId': ''}) }}"+"/"+item.value,
    text: "Add", style: "float:right"});
      //return $li.add(a).add(b).appendTo(ul);
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( a )
.appendTo( ul );
};


}

我从远程服务器返回的数据具有以下结构：

[{"label":"Try Try Try","value":"816747","thumb":"http:mydomain/myimages/1.jpg"}, ...more results...]

我有以下问题：如果我将我的mous直接放在搜索字段下，让我们总是说生成的结果列表的第四个位置，则始终会自动调用焦点事件并设置“项目”。标记“到输入搜索字段。举个例子，我上传了一张照片。

http://img15.imageshack.us/img15/7619/result1.png

我输入了searchterm“try try try”，ul弹出，我的鼠标直接聚焦第四个结果，即“尝试”。结果是，“try”现在显示在我的搜索字段中。如果我要另外输入最后一个结果“尝试”一个新单词并且不移动鼠标位置（只需使用键盘上的删除按钮），例如“尝试尝试”，ul弹出新结果但鼠标自动聚焦结果列表的第四个位置，再次“尝试”。这个重点结果“覆盖”我的搜索项目“尝试尝试”，这是以前在那里。如果我不将鼠标指针移出生成结果的区域，我无法避免在结果项上“自动聚焦”这种行为。

在jquery ui：http://jqueryui.com/demos/autocomplete/#custom-data的示例页面上，这很有效。如果生成了新项，则结果项上的“焦点”处于非活动状态。

有谁知道这里出了什么问题？谢谢，拉莫

编辑：嗨，我现在直接采用jQuery示例并做了一个jsfiddle： http://jsfiddle.net/zK3Wc/13/ 如果你放置鼠标，例如在搜索输入字段下方两厘米处开始输入“s”，应预先选择“Sizzle JS 2”。如果您现在开始慢慢按下后退（删除）按钮，每秒1次，例如，搜索输入字段中的值始终更新和聚焦。这是默认行为吗？如果鼠标抵抗结果列表中的“进入”（例如搜索输入字段下方两厘米）

，则只会发生这种情况

Answer 1

我很困惑，你在焦点事件处理程序中有特定的代码，它完全符合你的抱怨。尝试删除：

focus: function( event, ui ) {
   $(this).val(ui.item.label);
        return false;
    },

如果鼠标指向结果列表，则jquery ui autocomplete会自动选择结果项

1 个答案: