Автозаполнение jQueryUI «выбор» не работает при щелчке мыши, но работает с ключевыми событиями

Question

JS / JQuery:

$this.find('input').autocomplete({
    source: "/autocomplete_tc_testcasename", 
    minLength: 2,
    focus: function(e,ui){
        $(this).val(ui.item.label);
        return false;
    },   
    select: function(e, ui) {
        console.log("Selected: "+ui.item.value);
    }    
}); 

CSS:

        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            padding: 5px;
        }   
        .ui-menu {
            list-style: none;
            background-color: #FFFFEE;
            width: 50%;
            padding: 0px;
            border-bottom: 1px solid #DDDDDD;
            border-radius: 6px;
            -webkit-box-shadow: 0 8px 6px -6px black;
            -moz-box-shadow: 0 0px 0px -0px black;
            box-shadow: 0px 2px 2px 0px #999999;
        }   
        .ui-menu .ui-menu {
        }
        .ui-menu .ui-menu-item {
            color: #990000;
            font-family:"Verdana";
            font-size: 12px;
            border-top: 3px solid #DDDDDD;
            background-color: #FFFFFF;
            padding: 10px;
        }

Описание проблемы:

• AJAX работает нормально, я правильно получаю все записи в меню автозаполнения.
• Я могу использовать клавиши со стрелками вверх / вниз для выбора пунктов меню, и когда я нажимаю клавишу возврата, событие выбора запускается правильно и отображается сообщение консоли.
• Я могу сосредоточиться на элементах пользовательского интерфейса и захватывать события мыши для изменения значения входного текста.
• Я не могу нажать на пункт меню и запустить событие выбора. т.е. когда я нажимаю на элемент меню, консольное сообщение никогда не отображается.
• Как будто событие щелчка закрывает меню и закрывает его вместо фактического запуска события выбора. Есть идеи, как решить эту проблему?
• Я попробовал "appendTo: $ this" вместо этого для ввода родительского div, и затем щелчок мыши работает нормально! - событие выбора срабатывает, и сообщение консоли отображается успешно. Но это не то, что я хочу, так как меню добавляется в родительский div, который искажает пользовательский интерфейс, поскольку они, вероятно, используют один и тот же z-индекс. Даже если я в этом случае поменяю z-индекс на число с большой цифрой, это не очень помогло. Поэтому я ищу решение, в котором у меня нет «необходимости» использовать appendTo, если это возможно.

Я нашел несколько других вопросов довольно близко, но, похоже, ни один из них не отвечает на мой вопрос.

jQuery Autocomplete - Левая кнопка мыши не срабатывает Выбрать событие

Событие выбора автозаполнения jQuery UI не работает с щелчком мыши

Спасибо!

Answer 1

Я столкнулся с подобной проблемой.Я хотел отправить форму, когда пользователь нажал на опцию.Но форма была отправлена ​​еще до того, как можно было установить значение ввода.Следовательно, на стороне сервера контроллер получил нулевое значение.

Я решил это с помощью модифицированной версии ответа Уильяма Ниу на другой связанный пост - Событие выбора автозаполнения jQuery UI не работает с щелчком мыши

Я в основном проверил событиетип.Если это был щелчок, тогда я явно установил значение поля ввода в значение в ui.item.value.Смотрите фрагмент ниже,

jQuery( "#autoDropDown" ).autocomplete({
    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ], minLength: 0, delay:0,
    select: function( event, ui ) {
        var origEvent = event;
        while (origEvent.originalEvent !== undefined){
            origEvent = origEvent.originalEvent;
        }
        //console.info('Event type = ' + origEvent.type);
        //console.info('ui.item.value = ' + ui.item.value);
        if (origEvent.type == 'click'){
            document.getElementById('autoDropDown').value = ui.item.value;
            document.getElementById('myForm').submit();
        } else {
            document.getElementById('myForm').submit();     
        }

    }
    });

Answer 2

Я тестировал его во всех версиях IE (включая 9) и всегда получал пустой элемент управления вводом после выбора элемента с помощью мыши. Это вызвало некоторые головные боли. Я даже спустился к исходному коду jQuery UI, чтобы посмотреть, что там происходит, но также не нашел никаких подсказок. Мы можем сделать это, установив тайм-аут, который внутренне ставит в очередь событие в javascript-движке IE. Поскольку гарантируется, что это событие времени ожидания будет поставлено в очередь после события фокуса (это уже было инициировано ранее самим IE)

select: function (event, ui) {
    var label = ui.item.label;
    var value = ui.item.value;
    $this = $(this);
    setTimeout(function () {
        $('#txtBoxRole').val(value);
    }, 1);
},

Answer 3

У меня такая же проблема, но в моем случае это еще более странно.событие выбора срабатывает каждый второй раз (при использовании мыши).для меня событие select также срабатывает очень хорошо, если я использую клавиатуру.

к сожалению, я не смог воспроизвести эту проблему с помощью jsfiddle.но я все еще хочу предложить свой jsfiddle, возможно, это хорошая отправная точка для дальнейшего анализа.Вот мой код jsFiddle: http://jsfiddle.net/knzNg/

Единственное отличие состоит в том, что я использую локальный массив в качестве источника данных для автозаполнения данных.Я думаю, что лучше изменить код для использования удаленного источника данных.

Answer 4

Это работает для меня:

$this.find('input').autocomplete({
    source: "/autocomplete_tc_testcasename", 
    minLength: 2,
    },   


    focus: function(event, ui) { 
        $('#input').val(ui.item.value); 
    },

    select: function () {
        $("#button").click();
    }


}); 

Answer 5

Если кто-то еще сталкивается с этим :-) через 2 с половиной года ..

Решение проблемы ОП заключается в вызове event.stopPropagation() внутри вашего select обратного вызова. Пример:

$input.autocomplete( {
    // ... options
    select: function( event, ui ) {
        // ... handlers
        e.stopPropagation();
    }
} );

просто возврат false из обратного вызова не работал

Answer 6

@ Комментарий atsurti имеет добрые намерения, но есть лучший способ.

Просто используйте вместо этого тайм-аут, позволяя jQuery установить время для формы.Меньше кода = лучше кода, да?:)

jQuery( "#autoDropDown" ).autocomplete({
  source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ], minLength: 0, delay:0,
  select: function( event, ui ) {
    window.setTimeout(function(){
      document.getElementById('myForm').submit();  
    }, 1);
  }
});

Answer 7

У меня была эта проблема сегодня, и я обнаружил, что поле, которое должно иметь автозаполнение, имеет событие фокуса, которое использует document.getElementById ('id'). Value = с неправильным идентификатором, тем самым останавливая сценарии.

Answer 8

Изменение версии плагина проверки jquery на 1.9 работает для меня

Answer 9

У меня та же проблема, и после долгих поисков кажется, что какой-то другой плагин jquery конфликтует с UI Core. В результате мой jquery validation plugin version 1.6 стал причиной ошибки. Я изменил jquery validation to 1.9 и теперь autocomplete можно выбрать с помощью мыши.

Answer 10

Я думаю, что в коде поля со списком может быть ошибка, так как я не могу заставить это работать. Попробуйте изменить 'select:' на 'selected:'.

Или вы можете попробовать изменить код в реальном коде пользовательского интерфейса JQuery, я считаю, что виновником является нижеприведенное изменение, поэтому может сработать изменение 'select'. Я говорю, что, возможно, поскольку я не пробовал это, я просто пошел с вышеупомянутым.

select: function( event ) {
    this._trigger("selected", event, { item: this.active });
}