Question

我在页面顶部有一个jquery自动填充文本框。通常，用户将在文本框中单击以使其聚焦，将鼠标移开，然后开始键入。如果用户将鼠标移动到自动完成下方，则他们的鼠标位置可能会无意中选择一个建议，即使他们没有做任何事情。当发生这种情况并且用户点击回车键时，自动完成功能会使用他们的无意选择。

这是一个主要问题，因为我的自动填充位置......它一直在发生，对我的用户来说非常令人沮丧。我需要一个解决方案，但我似乎无法获得自动完成功能，先给我一个按键事件。

这是我的例子：

http://jsfiddle.net/uqTv9/2/

Answer 1

您只需使用select事件就可以阻止输入：

$('#query').autocomplete({
    source: [
        "A",
        "AAA",
        "AAAAA",
        "AAAAAAAAA",
        "AAAAAAAAA",
        "AAAAAAAAAAA",
        "AAAAAAAAAAAAAA",
        "AAAAAAAAAAAAAAAA",
        "AAAAAAAAAAAAAAAAAA",
        "AAAAAAAAAAAAAAAAAAAAA",
        "AAAAAAAAAAAAAAAAAAAAAAAA"
    ],
    select: function(e, ui) {
        if(e.which === 13 ) {  return false; }
    }
});

JSFIDDLE：http://jsfiddle.net/gurkavcu/xSKPz/1/

Answer 2

下面是一个黑客，基本上它否定了jQuery的样式和选择。实现了搜索回调并在那里添加了hack来删除jQuery样式并在移动鼠标时删除了hack。

DEMO

注意：我还没有机会尝试输入密钥。

$('#query').autocomplete({
    source: [
        "A",
        "AAA",
        "AAAAA",
        "AAAAAAAAA",
        "AAAAAAAAA",
        "AAAAAAAAAAA",
        "AAAAAAAAAAAAAA",
        "AAAAAAAAAAAAAAAA",
        "AAAAAAAAAAAAAAAAAA",
        "AAAAAAAAAAAAAAAAAAAAA",
        "AAAAAAAAAAAAAAAAAAAAAAAA"
        ],
    search: function(event, ui) {
        $(document).on('mouseenter', '.ui-menu-item a', function(e) {
            //Remove jQuery styling and selection.
            $(this).removeClass('ui-state-hover');
            this.id = '';
            e.preventDefault();
        }).one('mousemove', '.ui-menu-item a', function(e) {
            //implement mouse move once if moved inside the same li>a
            $(this).addClass('ui-state-hover');
            this.id = 'ui-active-menuitem';

           //unbind the mouse event so it works as normal
           $(document).on('mouseenter', '.ui-autocomplete', function(e) {
               $(document).off('mouseenter', '.ui-menu-item a');
            });
        });
    }
});
$('#query').keypress(function(ev) {
    if (ev.keyCode == 13) {
        alert('query: ' + $(this).val());
        return (false);
    }
});

Answer 3

这个帖子已经关闭但由于我遇到了类似的问题并且上面列出的解决方案对我没有用，我想分享这个解决方案。

它包括在打开结果列表后聚焦第一个元素。

$('.selector').autocomplete({
    open: function () {
        var w = $(this).autocomplete('widget');
        setTimeout(function () { $('li:first', w).mouseover(); }, 50);
    }
});

我的问题是当你将鼠标指针放在文本框下面然后开始输入搜索时，自动完成选择鼠标指针下的项而不是第一个。

jquery自动完成 - 显示菜单后，文本框a下方的鼠标会导致选择

3 个答案: