Автозаполнение jQueryUI отображает значение вместо метки в целевом поле ввода - PullRequest
Новая
       13

Автозаполнение jQueryUI отображает значение вместо метки в целевом поле ввода

0 голосов
/ 27 августа 2018

Я передаю автозаполнение пользовательского интерфейса jQuery из локального массива следующим образом: 

var articleCategories = [
{
    label: "Technical",
    value: 1
}, 
...
];

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

function displaySelectedCategoryLabel(event, ui) {
    $("#txtCategory").val(ui.item.label);
    $("#hidSelectedCategoryId").val(ui.item.value);
};

var autoComplete = $("#txtCategory").autocomplete({
    source: articleCategories,
    classes: ...,
    position: ...,
    focus: function (event, ui) {
        $("#txtCategory").val(ui.item.label);
    }, 
    select: function (event, ui) {
        displaySelectedCategoryLabel(event, ui);
    }, 
    change: function (event, ui) {
        displaySelectedCategoryLabel(event, ui);
    }
});

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

Вот что происходит:

  1. Когда я меняю фокус , наводя указатель мыши на элементы в окне предложения, событие focus работает очень хорошо, отображая метки в целевом поле ввода.

  2. Однако, если я перемещаюсь по элементам в окне предложения с помощью клавиш клавиатуры , еще раз, только value s появляются в целевом поле ввода.Нужно ли также переоценивать события keypress, keyup и keydown?Но какой контроль, поскольку окно предложения создается динамически.

  3. Когда я выбираю запись из поля предложения, в поле ввода цели отображается label, подчиняющийся моему обработчику, но тольковкратце, как описано выше.Скоро он вернется к отображению value, пока я остаюсь внутри целевого элемента управления.

  4. И, как и ожидалось, как только я уберу фокус с внешнего элемента управления,происходит событие изменения, и целевое поле ввода начинает отображать label согласно моему обработчику.

Что происходит?Я пропустил обработчик событий?

Демо

Вот рабочая демоверсия , которая иллюстрирует проблему.Загрузите всю папку с именем TestJQueryUIAutoComplete , поскольку она содержит файлы jQaseryUI jQueryUI и файлы CSS.Если у вас уже есть эти файлы CSS и JS, вам нужно всего лишь загрузить файл TestJQueryUIAutoComplete.html.

1 Ответ

0 голосов
/ 27 августа 2018

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

Добавление предотвратительной проверки () на focus и displaySelectedCategoryLabel, кажется, решает проблему, в то время как я 'Я до сих пор выясняю, почему он так себя ведет. 

<html>
<head>
    <link rel = "stylehseet" type = "text/css" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.css"  />
    <link rel = "stylehseet" type = "text/css" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.structure.css"  />
    <link rel = "stylehseet" type = "text/css" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.theme.css"  />
    <style>
        #txtCategory {
            width: 400px;
            height: 50px;
            border: 2px solid red;
            padding-left: 20px;
            font-size: 20px;
        }

        .myCustomClass {
            font-size: 40px;
            font-family: "Georgia";
            list-style-type: none;
            background-color: blue;
            color: white;
        }
    </style>
<meta charset="utf-8"
</head>

<body>
    <input id = "txtCategory" />
    <input id = "hidSelectedCategoryId" type = "hidden" />

    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    <script>
        $(function() {

            var articleCategories = [
            {
                label: "Technical",
                value: 1
            },
            {
                label: "Non-Technical",
                value: 2
            },
            {
                label: "External Publications",
                value: 3
            },
            {
                label: "Books",
                value: 4
            },
            {
                label: "Movies",
                value: 5
            }
        ];
        function displaySelectedCategoryLabel(event, ui) {
            $("#txtCategory").val(ui.item.label);
            $("#hidSelectedCategoryId").val(ui.item.value);
            event.preventDefault();
        };
        var autoComplete = $("#txtCategory").autocomplete({
            source: articleCategories,
            classes: {
                "ui-autocomplete": "myCustomClass"
            },
            position: {
                my: "left top",
                at: "left bottom",
                of: "#txtCategory",
                collision: "fit"
            },
            focus: function (event, ui) {
                $("#txtCategory").val(ui.item.label);
                event.preventDefault();
            },
            select: function (event, ui) {
                displaySelectedCategoryLabel(event, ui);
            },
            change: function (event, ui) {
                displaySelectedCategoryLabel(event, ui);
            }
        });
    });
    </script>
</body>

...