添加 class 以自动完成多个字段的结果

Question

我有一个页面有两个使用 Jquery UI 自动完成的输入字段，我希望它们的功能相互映射。我已经为每个项目添加了一个 class 下拉结果以根据此更改背景颜色：。自动完成功能将在两个输入上正常工作，但在第二个搜索框上搜索时，样式 class 不会添加到导致白色背景的结果中。它仅适用于 class 到第一个搜索框的结果集。我如何将此样式应用于页面上的两个（所有）自动完成搜索框的结果？

这些是搜索字段：

<input class="autocomplete-test" id="search1" type="text" data-autocomplete-url="URLToGetInfoHere" />
<input class="autocomplete-test" id="search2" type="text" data-autocomplete-url="URLToGetInfoHere"/>

这是自动完成：

$(".autocomplete-test").autocomplete({
    source: $(".autocomplete-test").attr("data-autocomplete-url")        
}).data("ui-autocomplete")
    ._renderItem = function (ul, item) {
        var listItem = $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);

        if (item.IsEligible) {
            listItem.addClass("eligible");//Change BG color to green
        }
        else {
            listItem.addClass("ineligible")//Change BG color to red
        }
        return listItem;
    };

Answer 1

...but when searching on the 2nd search box, the styling class is not added

发生这种情况是因为您初始化了两个自动完成功能，因此您需要循环使用每个自动完成功能才能应用您的 renderItem。

更改此行：

}).data("ui-autocomplete")._renderItem = function (ul, item) {

至：

}).each(function(idx, ele) {
   $(ele).data("ui-autocomplete")._renderItem = function (ul, item) {

var availableTags = [
    {"id": 1, "label": "ActionScript", "IsEligible": false},
    {"id": 1, "label": "AppleScript", "IsEligible": false},
    {"id": 1, "label": "Asp", "IsEligible": true},
    {"id": 1, "label": "BASIC", "IsEligible": false},
    {"id": 1, "label": "C", "IsEligible": true},
    {"id": 1, "label": "C++", "IsEligible": false},
    {"id": 1, "label": "Clojure", "IsEligible": true},
    {"id": 1, "label": "COBOL", "IsEligible": true},
    {"id": 1, "label": "ColdFusion", "IsEligible": true},
    {"id": 1, "label": "Erlang", "IsEligible": true},
    {"id": 1, "label": "Fortran", "IsEligible": true},
    {"id": 1, "label": "Groovy", "IsEligible": true},
    {"id": 1, "label": "Haskell", "IsEligible": true},
    {"id": 1, "label": "Java", "IsEligible": true},
    {"id": 1, "label": "JavaScript", "IsEligible": true},
    {"id": 1, "label": "Lisp", "IsEligible": true},
    {"id": 1, "label": "Perl", "IsEligible": true},
    {"id": 1, "label": "PHP", "IsEligible": true},
    {"id": 1, "label": "Python", "IsEligible": true},
    {"id": 1, "label": "Ruby", "IsEligible": true},
    {"id": 1, "label": "Scala", "IsEligible": true},
    {"id": 1, "label": "Scheme", "IsEligible": true}
];
$(".autocomplete-test").autocomplete({
    source: availableTags //$(".autocomplete-test").attr("data-autocomplete-url")
}).each(function(idx, ele) {
    $(ele).data("ui-autocomplete")
            ._renderItem = function (ul, item) {
        var listItem = $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.label + "</a>")
                .appendTo(ul);

        if (item.IsEligible) {
            listItem.addClass("eligible");//Change BG color to green
        }
        else {
            listItem.addClass("ineligible")//Change BG color to red
        }
        return listItem;
    };
});

.IsEligible {
    background-color: red;
}
.eligible {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<input class="autocomplete-test" id="search1" type="text" data-autocomplete-url="1.json" />
<input class="autocomplete-test" id="search2" type="text" data-autocomplete-url="1.json"/>

添加 class 以自动完成多个字段的结果

Adding class to autocomplete results for multiple fields

jquery

jquery-ui

jquery-ui-autocomplete