JQuery UI AutoCompletion выбирает элементы результата автоматически, если мышь указывает на список результатов - PullRequest
Новая
       14

JQuery UI AutoCompletion выбирает элементы результата автоматически, если мышь указывает на список результатов

0 голосов
/ 29 января 2012

У меня есть следующий код для извлечения данных из внешнего источника и отображения списка автозаполнения: 

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...]

У меня следующая проблема: если я помещаю свой мышу прямо под полем поиска, скажем, всегда на четвертой позиции сгенерированного списка результатов, событие фокуса всегда вызывается автоматически и устанавливает"item.label" в поле поиска ввода.Например, я загрузил картинку.

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

Я набрал в строке поиска "try try try", ul выскакивает, и моя мышь фокусируется непосредственно на четвертом результате.который "попробуй".В результате эта «попытка» теперь отображается в моем поле поиска.если я собираюсь ввести дополнительно к последнему результату "попробовать" новое слово и не перемещать позицию мыши (просто используя кнопку удаления на моей клавиатуре), например, "попробовать попробовать", ul выскакивает с новыми результатамино мышь автоматически фокусирует четвертую позицию в списке результатов, что снова означает «попробовать».эти результаты "перезаписывают" мой поисковый запрос "try try", который ранее был там.Я не могу избежать такого поведения «автофокусировки» на элементе результата, если я не перемещаю указатель мыши из области, где генерируется результат.

На страницах примеров jquery ui: http://jqueryui.com/demos/autocomplete/#custom-data это хорошо работает.если генерируется новый, «фокус» на элементе результата неактивен.

Кто-нибудь знает, что здесь происходит не так?Спасибо, Рамо

РЕДАКТИРОВАТЬ: Привет, я сейчас взял непосредственно пример jQuery и сделал jsfiddle: http://jsfiddle.net/zK3Wc/13/, если вы поместите курсор мыши, например, на два см ниже поля ввода поиска и начнете печатать«s», выбор «Sizzle JS 2» должен быть предварительно выбран.Если вы начинаете медленно нажимать кнопку возврата (удаления), 1 раз в секунду, например, значение в поле ввода поиска всегда обновляется и фокусируется.это поведение по умолчанию?это происходит, только если мышь сопротивляется «в» списке результатов (например, на два см ниже поля ввода поиска)

1 Ответ

0 голосов
/ 30 января 2012

Я запутался, у вас есть определенный код в обработчике событий фокуса, который делает именно то, на что вы жалуетесь.Попробуйте удалить: 

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