jquery autocomplete - мышь под текстовым полем a вызывает выбор после отображения меню - PullRequest
Новая
       30

jquery autocomplete - мышь под текстовым полем a вызывает выбор после отображения меню

4 голосов
/ 09 марта 2012

У меня есть текстовое поле автозаполнения JQuery в верхней части страницы.Обычно пользователь щелкает текстовое поле, чтобы выделить его, убирает мышь и начинает печатать.Если пользователь перемещает мышь ниже автозаполнения, его местоположение мыши может непреднамеренно выбрать предложение, даже если он ничего не делал.Когда это происходит, и пользователь нажимает клавишу ввода, автозаполнение использует их непреднамеренный выбор.

Это серьезная проблема из-за местоположения моего автозаполнения ... это происходит постоянно, и это крайне неприятномои пользователи.Мне нужно решение, но я не могу получить автозаполнение, чтобы сначала дать мне событие нажатия клавиши.

Вот мой пример:

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

Ответы [ 3 ]

2 голосов
/ 09 марта 2012

Просто вы можете использовать событие 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/

0 голосов
/ 28 ноября 2017

Эта тема уже закрыта, но, поскольку у меня была похожая проблема, и решение, указанное выше, не сработало для меня, я хотел бы поделиться этим решением.

Он состоит из фокусировки первого элемента после открытия списка результатов. 

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

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

0 голосов
/ 09 марта 2012

Ниже приведен взлом, и в основном он отрицает стилизацию и выбор jQuery.Реализован обратный поиск и добавлен хак, чтобы убрать стилизацию jQuery и убрать хак при перемещении мыши.

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);
    }
});
...