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

为多个字段的自动填充结果添加类

1 个答案: