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 и захватывать события мыши, чтобы изменить значение вводимого текста.Я не могу нажать на пункт меню и запустить событие выбора. т.е. когда я нажимаю на элемент меню, консольное сообщение никогда не отображается.Это как если бы событие click закрыло меню и закрыло его, вместо того, чтобы фактически вызвать событие select. Есть идеи, как решить эту проблему?Я попробовал "appendTo: $ this" вместо того, чтобы вводить родительский div, и затем щелчок мыши работает нормально! - событие выбора срабатывает, и сообщение консоли отображается успешно. Но это не то, что я хочу, так как меню добавляется в родительский div, который искажает пользовательский интерфейс, поскольку они, вероятно, используют один и тот же z-индекс. Даже если я в этом случае поменяю z-индекс на число с большой цифрой, это не очень помогло. Поэтому я ищу решение, в котором у меня нет «необходимости» использовать appendTo, если это возможно.

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

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

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

Спасибо!