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
Idan
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
Ahs N
source
to share
try putting css on class = "ui-menu-item"
.ui-menu-item{
color:red;
}
0
Guilherme silva
source
to share