CODEWITHSUNDEEP
jqueryjquery-uicolorsautocomplete
user222137
user222137

Reputation: 51

JQUERY UI Autocomplete, change color on the last word

i want to change the text color only on my last word for every row. Im using autocomplete function of Jquery UI, so im using li elements with the class 'ui-menu-item'

 $('#tag' + i).autocomplete({
      source: allMyProducts
 });

I don't understand how to do this, can someone help me?

EDIT1: These are my rows: enter image description here

For exemple a row is: "this is a test", I want change the color like this "this is a test" (test is red color)

Upvotes: 0

Views: 201

Answers (1)

Twisty
Twisty

Reputation: 30899

Consider the following code.

$(function() {
  var availableTags = [
    "Catalizzatore Aqua-Pur-Haerter 82220 MDIVECA000467",
    "Catalizzatore CATAL. X MDIVECA000782",
    "Fondo acqua AQUATECH FONDO TIX HBS9A04",
    "Fondo acqua AQUATECH FONDO TIX HQ TT9/90 MDIVEFH000402"
  ];
  $("#tags").autocomplete({
    source: availableTags
  }).autocomplete("instance")._renderItem = function(ul, item) {
    var words = item.label.split(" ");
    var last = words.pop();
    return $("<li>")
      .append("<div>" + words.join(" ") + " <span class='red'>" + last + "<span></div>")
      .appendTo(ul);
  };
});
.red {
  color: red;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

This is created from the following example: https://jqueryui.com/autocomplete/#custom-data

A quick method to break up a sentence is to turn the String into an Array. So we can explode the sentence into words by splitting it, using " ". We can then pop off the last word and join the rest of the words back into a sentence. I wrap the last word with a <span> tag with a Class so that we can easily style the text.

References:

Upvotes: 1

Related Questions