Adding class to autocomplete results for multiple fields

Question

I have a page that has two input fields that utilize Jquery UI autocomplete and I want their functionality to mirror each other. I've added a class to each item the dropdown results to change the background color based on this: https://stackoverflow.com/a/18813136/5473973. The autocomplete functionality will work on both inputs properly but when searching on the 2nd search box, the styling class is not added to the results resulting in a white background. It is only applying to the class to the first search box's set of results. How do I apply this styling to both (all) the autocomplete search box's results on the page?

These are the search fields:

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

And this is the auto complete:

$(".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;
    };

gaetanoM · Accepted Answer · 2018-03-29 17:24:09Z

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

This happens because you initialize two autocomplete and so you need to cycle on each one in order to apply your renderItem.

Change this line:

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

to:

}).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"/>

Collectives™ on Stack Overflow

Adding class to autocomplete results for multiple fields

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related