Question

每当我的鼠标悬停在自动完成下拉列表最终打开的位置时，就会触发鼠标指针下方显示的项目的焦点事件。当输入框中输入的文本突然被下拉列表中的项目替换时，这会给用户带来一些相当混乱的行为。

任何人都知道是否有办法避免这种情况？

更新

似乎这只发生在Firefox中（至少在v6.0中，在Linux上）。在Chrome中，我没有看到这种行为。那么...... JQuery bug？

我已添加以下代码。

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>

JQuery UI自动完成：不必要的自动焦点打开

0 个答案: