CODEWITHSUNDEEP
javascriptjquery
user12703537
user12703537

Reputation:

Changing Jquery ui autocomplete result that contains specific string

There is a very similar question here: jquery autocomplete color change

Which is essentially what I want to do but I want to change the css if one of the search results contains the word "Entry".

This is the function im calling using the jquery ui script:

$(function() {
    $(".wholesale_product_id").autocomplete({
        source: "http://localhost/ingredients-sheets/search-3hou5njk3jndnjk3kj2.php",
        minLength: 1
    });
});

This function is working and will produce a list like this (please note I have copied the html from dev tools and just copied part of it for demonstration purposes) :

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-1" tabindex="0" style="display: none; width: 1110px; top: 322px; left: 469px;">
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-2" class="ui-corner-all" tabindex="-1">[*2042*] - Fanta Orange cans 355ml x 24</a>
    </li>
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-3" class="ui-corner-all" tabindex="-1">[*116*] - Fanta Strawberry cans 355ml x 24</a>
    </li>
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-4" class="ui-corner-all" tabindex="-1">[*4381*] - Fanta Berry cans 355ml x 24</a>
    </li>
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-44" class="ui-corner-all" tabindex="-1">Entry ID - [*2115*] - Fanta Strawberry cans 355ml x 24 (no full stop)</a>
    </li>
</ul>

A picture of the results in the browser:

Search results

What I want to achieve:

I want any search result or tag that contains "Entry ID" or "Entry" to be red colored text and preferably at the top of the list.

I have tried:

Just to see if I could change the colour to all the search results using the following code but even that doesn't work and thats without trying to find the string Entry. 

$( "a.ui-menu-item").css( "color", "#e74c3c");

Any advice would be great.

* EDIT *

Just a bit more information, the results that start with Entry ID are custom results we have saved that come from a different database table and we want these to be at the top of the search result list with a red font color.

Upvotes: 1

Views: 601

Answers (1)

Eduardo Molteni
Eduardo Molteni

Reputation: 39413

You have complete control over how AutoComplete renders it's list with _renderItem If you like to do it server side, just return the Json list with an IsRedClass property and the name 

$(".wholesale_product_id").autocomplete({
    source: "http://localhost/ingredients-sheets/search-3hou5njk3jndnjk3kj2.php",
    minLength: 1
})
.data("autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
      .data("item.autocomplete", item)
      .append('<a class="' + item.IsRedClass + '">' + item.Name + '</a>')
      .appendTo(ul);
};

Or client side:

$(".wholesale_product_id").autocomplete({
    source: "http://localhost/ingredients-sheets/search-3hou5njk3jndnjk3kj2.php",
    minLength: 1
})
.data("autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
      .data("item.autocomplete", item)
      .append('<a class="' + item.Name.includes("Entry") ? "red" : "" + '">' + item.Name + '</a>')
      .appendTo(ul);
};

Upvotes: 2

Related Questions