Автозаполнение пользовательского интерфейса JQuery: нежелательная автоматическая фокусировка на открытом - PullRequest
Новая
       6

Автозаполнение пользовательского интерфейса JQuery: нежелательная автоматическая фокусировка на открытом

0 голосов
/ 31 августа 2011

Всякий раз, когда моя мышь наводится над местом, где в конечном итоге открывается выпадающий список автозаполнения, событие фокуса срабатывает для элемента, который появляется под указателем мыши.Это приводит к довольно странному поведению пользователя, когда текст, который вводится в поле ввода, внезапно заменяется элементом из выпадающего списка.

Кто-нибудь знает, есть ли способ избежать этого?

Обновление:

Кажется, это происходит только в Firefox (по крайней мере, в v6.0, в Linux).В Chrome такого поведения не вижу.Итак ... Ошибка JQuery?

Я добавил код ниже.

Javascript: 

$(function() {
    $( "#query" ).autocomplete({
        source: 'http://localhost:3000/autocomplete',
        minLength: 2,
        focus: function( event, ui ) {
            if (typeof ui.item != 'undefined') { // undefined when last item in results
                value = ui.item.name;

                // For some search results (county, municipality) we add extra info
                // to the query to ensure exact match
                if (ui.item.extra_info != "") {
                    value += ", " + ui.item.extra_info;
                }
                $( "#query" ).val( value );
            }

            return false;
        },
        select: function( event, ui ) {
            if (typeof ui.item != 'undefined') { // undefined when last item in results
                value = ui.item.name;

                if (ui.item.extra_info != "") {
                    value += ", " + ui.item.extra_info;
                }

                $( "#query" ).val( value );
            }

            $( "#search_form" ).submit();
            return false;
        }
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {

        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.name + "</a>" )
            .appendTo( ul )}
});

    $.widget( "custom.autocomplete", $.ui.autocomplete, {
        _renderMenu: function( ul, items ) {
            var self = this,
                currentCategory = "";

            $.each( items, function( index, item ) {
                if ( item.category != currentCategory ) {
                    ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                    currentCategory = item.category;
                }

                self._renderItem( ul, item );

            });
                    ul.append("<hr>");
                    $("<li><a>Search for all hits on \"" + this.term + "\"</a></li>")
                        .appendTo(ul);
        }
    });

Форма: 

<form accept-charset="UTF-8" action="/sok" id="search_form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
<div class="ui-widget">
  <input class="ui-autocomplete-input" id="query" name="query" type="text" value="" />
  <input name="commit" type="submit" value="Search" />
</div>
</form>
...