jQuery UI自动完成向上/向下箭头不显示项目选择

Question

我正在尝试让 jQuery 自动完成功能正常工作，但在使用向上/向下箭头时它不会显示/突出显示该项目。在我将event.preventDefault(); 放入focus 事件之前，它根本没有用向上/向下箭头做任何事情。但是现在它将使用箭头在自动完成列表中上下移动，但是当您将鼠标“悬停”在它们上方时，这些项目不会突出显示。因此，您可以使用箭头选择一个项目，但您无法分辨您在哪个项目上，因为当箭头在列表中移动时，它不会突出显示它们。

<input type="text" placeholder="Enter your school name..." name="school" id="school" class="schoolpicker school-input text-center form-control form-control-md-lg">

        $("#school").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Search/Find",
                    type: "POST",
                    dataType: "json",
                    data: { prefix: request.term },
                    success: function (data) {
                        response(data);
                        $('#FindLoans').prop("disabled", true);
                    }
                });
            },
            appendTo: ".form",
            select: function (event, ui) {
                $("span#SchoolName").text(ui.item.Name);
                $("#school").val(ui.item.Name);
                $('#FindLoans').removeAttr("disabled");
                $.ajax({ -- get data here --});
                return false;
            },
            focus: function (event, ui) {
                event.preventDefault();
                $("#" + ui.item.SchoolID).attr("title", ui.item.Name + " - " + ui.item.Location);                    
            },
            autoFocus: true,
            selectFirst: true,
            change: function (event, ui) {}
        }).data("ui-autocomplete")._renderItem = function (ul, item) {
            return $("<li id=" + item.SchoolID + ">")
                .data("ui-menu-divider", item)
                .append(item.Name)
                .appendTo(ul);
        };

我已经尝试使用另一个答案中的这些类，但它们不起作用：

 .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
        cursor: pointer;
        background: #14aecf;
    }

    .ui-menu-item:active .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
        cursor: pointer;
        background: #14aecf;
    }

这是我的悬停 CSS：

   .ui-menu-item {
        font-size: 18px;
        text-align: left;
        padding: 10px;
    }

        .ui-menu-item:hover {
            color: #fff;
            background-color: #14aecf;
            border-color: #14aecf;
            font-size: 18px;
            text-align: left;
        }

任何想法为什么向上/向下没有突出显示项目？

这是我正在使用的 jQuery UI CSS。如果这有所作为，我也在使用 Bootstrap。它在 UI CSS 之前。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">

此外，如果不放置 hover CSS，用于自动完成的常规 jQuery UI 悬停将不起作用。我有这三个文件，是我缺少 CSS 文件还是什么？

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.structure.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.css"/>

Answer 1

我发现这是导致问题的代码的结尾部分：

.data("ui-autocomplete")._renderItem = function (ul, item) {
        return $("<li id=" + item.SchoolID + ">")
            .data("ui-menu-divider", item)
            .append(item.Name)
            .appendTo(ul);
    }

我在某个地方找到了该代码，因此我使用了它，并且它工作正常，除了向上/向下箭头外。

我所做的是删除它并添加带有$map 的项目：

           source: function(request, response) {
                $.ajax({
                    url: "/Search/Find",
                    type: "POST",
                    dataType: "json",
                    data: { prefix: request.term },
                    success: function(data) {
                        $('#FindLoans').prop("disabled", true);
                        response($.map(data,
                            function(obj) {
                                return {
                                    label: obj.Name,
                                    value: obj.Name,
                                    description: obj.Location,
                                    id: obj.SchoolID
                                };
                            }));
                    }
                });
            },
            appendTo: ".form",

这已经解决了所有问题...向上/向下箭头现在可以了。