Список автозаполнения jQuery установлен для отображения: нет; - PullRequest
Новая
       26

Список автозаполнения jQuery установлен для отображения: нет;

0 голосов
/ 25 мая 2018

У меня есть два поля ввода автозаполнения на одной странице, каждое из которых вызывает свой источник.

Первое поле ввода отображается при загрузке страницы.Второе поле ввода автозаполнения возвращается при вызове ajax и находится в модальном окне начальной загрузки.

Первое автозаполнение работает просто отлично: 

$("#IdOfFirstInputField").autocomplete({
    source: (url),
    minLength: 3,
    select: function (event, ui) {
        alert("It works...");
    }
});

Второе поле ввода находится в модале начальной загрузкис классом ui-front.

Я связываю автозаполнение как таковое, поскольку оно является частью возвращенного вызова ajax: 

$(document).on("keydown.autocomplete", "#IdForSecondInput", function () {
    $(this).autocomplete({
        source: (url2),
        minLength: 3,
        select: function (event, ui) {
            alert("It works...");
        }
    });
});

Эти пользовательские стили CSS применяются к обоимполя ввода автозаполнения: 

.ui-autocomplete {
    position: absolute;
    z-index: 1000;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #ccc
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}
.ui-autocomplete > li {
    padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus {
    background-color: #DDD;
}
.ui-helper-hidden-accessible {
    display: none;
}

В то время как первое автозаполнение работает так же, как и ожидалось, второе работает только до того момента, когда <ul> и элемент списка присоединяются к DOM.Однако стиль <ul> установлен на display:none;.Если я удаляю этот класс через инспектор в выбранном браузере, я вижу, что список выглядит отлично.

Любые идеи, почему элемент <ul> имеет значение display:none; после ответа JSONвозвращается правильно?

Похоже, что второе поле ввода теряет фокус сразу после того, как я прекращаю печатать внутри, в результате чего результирующее значение <ul> по умолчанию равно display:none;.

Ответы [ 2 ]

0 голосов
/ 29 апреля 2019

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

Ответил здесь

0 голосов
/ 26 мая 2018

Как указывалось в вопросе, проблема заключалась в том, что поле ввода автозаполнения утратило фокус.Поскольку поле ввода автозаполнения было получено в модальном окне, оно вызвало функцию jQuery, которая фокусировалась на поле ввода вне модального окна.

Хотя это решение очень специфично для моего случая, надеюсь, это короткоеnote будет по-прежнему полезен для тех, кто испытывает проблемы с автозаполнением jQuery, которые не отображают список должным образом: -)

...