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

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 работает нормально, я правильно получаю все записи в меню автозаполнения.
  • Я могу использовать клавиши со стрелками вверх/вниз для выбора пунктов меню, и как только я нажимаю «Ввод», событие выбора запускается правильно, и отображается консольное сообщение.
  • ] Я могу успешно сфокусироваться на элементах UI-меню и перехватывать события мыши над событиями, чтобы изменить значение вводимого текста.
  • Кажется, я не могу щелкнуть пункт меню и запустить событие выбора. Например, когда я щелкаю элемент меню, консоль сообщение никогда не отображается.
  • Это как если бы cli Событие ck отклоняет меню и закрывает его вместо фактического запуска события select. Любая идея о том, как преодолеть эту проблему?
  • Я попробовал «appendTo : $this» вместо ввода родительского элемента div, после чего щелчок мышью работает нормально! - событие select запускается, и консольное сообщение отображается успешно.Но это не то, что я хочу, так как меню добавляется в родительский div, что искажает пользовательский интерфейс, поскольку они, вероятно, имеют один и тот же z-индекс. Даже если в этом случае я изменю z-index на большее число, это не совсем поможет. Поэтому я ищу решение, в котором мне не нужно использовать appendTo, если это возможно.

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

Автозаполнение jQuery — щелчок левой кнопкой мыши не срабатывает. Событие выбора

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

Спасибо!

5
задан Community 23 May 2017 в 12:15
поделиться