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