Question

我从本地数组中获取jQuery UI自动完成功能，如下所示：

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这三个事件的替代。当我逐步进入调试器时，我看到它们的行为均与我预期的一样，除了一个小的像差，如下所述。

这是发生了什么：

当我通过将鼠标悬停在建议框中的项目上来更改焦点时，focus事件运行得很好，在目标输入字段中显示了标签。 / p>
但是，如果我再次使用键盘键在建议框中导航，则仅value出现在目标输入字段中。我是否还需要覆盖keypress，keyup和keydown事件？但是，由于建议框是动态创建的，因此是哪个控件。
当我从建议框中选择一个条目时，目标输入字段将显示label，服从我的处理程序，但如上所述，只是短暂地。只要我停留在目标控件中，它很快就会变回显示value。
并且正如预期的那样，一旦我将焦点从目标控件移到外部，就会发生更改事件，并且目标输入字段将按照我的处理程序开始显示label。
< / li>

这是怎么回事？我是否缺少事件处理程序？

演示

Here is a working demo说明了问题。请下载名为 TestJQueryUIAutoComplete 的整个文件夹，因为它包含jQueryUI javascript文件和CSS文件。如果您已经拥有这些CSS和JS文件，则只需下载TestJQueryUIAutoComplete.html文件。

Answer 1

看起来像焦点被触发了两次，覆盖了它的默认版本，将值放在了自动完成框中。

在焦点和displaySelectedCategoryLabel上添加一个preventDefault（）似乎可以解决该问题，而我仍在调查其行为为何如此。

<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>

jQueryUI自动完成功能在目标输入字段中显示值而不是标签

1 个答案: