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

此外，在没有放置通用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",

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

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

1 个答案: