将类添加到多个字段的自动完成结果

Question

我有一个页面，其中有两个使用 Jquery UI 自动完成的输入字段，我希望它们的功能相互镜像。我为下拉结果的每个项目添加了一个类，以基于此更改背景颜色：https://stackoverflow.com/a/18813136/5473973。自动完成功能将在两个输入上正常工作，但是在第二个搜索框上搜索时，样式类不会添加到结果中，从而导致白色背景。它仅适用于第一个搜索框的结果集的类。如何将此样式应用于页面上的两个（全部）自动完成搜索框的结果？

这些是搜索字段：

<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

...但是在第二个搜索框搜索时，没有添加样式类

发生这种情况是因为您初始化了两个自动完成功能，因此您需要在每一个上循环才能应用您的 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"/>