How to use CSS in autocomplete text boxes with selected values

Every time a client selects an element from the autocomplete text box, it automatically appears in the div I created right below the text box. I would like to style with css each selected element that appears in the div, not the entire div. For example, I want each selected item to appear with a black border. (I could easily use css on the div, but then I will get a border for the whole div, not for each selected element).

This is JS code. I need to add CSS to any new selected country.

$(function() {
     /* Textbox ID */ $("#destinations").autocomplete({
        select: function (event, ui) {
           /* div ID */ $("#DestinationsChosen").html(function(i, origText)
            {
                var SelectedCountry = ui.item.value.toString();
                var CurrentText = origText.toString();
                if ((CurrentText.indexOf(SelectedCountry) >= 0))
                {
                    alert("Already Exists");
                    return CurrentText;
                }
                return CurrentText + " " + SelectedCountry;
            })
        }
    });
})

      

Here is the whole code: http://jsfiddle.net/3zfcb04k/

+3


source to share


2 answers


Change this:

return CurrentText + " " + SelectedCountry;

      

:



return CurrentText + " <span>" + SelectedCountry + "</span><br/>";

      

Then apply CSS to the tag span

.

Below is the updated JSFiddle

+2


source


try putting css on class = "ui-menu-item"

.ui-menu-item{
  color:red;
}

      



enter image description here

0


source







All Articles