jquery ui autocomplete text color change

open: function(e, ui) {
       var data = $(this).data('autocomplete');          
       data.menu.element.find('li').each(function() {
           var $this = $(this);
             regEx = new RegExp("^" + data.term, "i");
             var matched = "";
         
             if ($this.text().match(regEx)) {
                matched = data.term
              }
           var rest = $this.text().replace(matched, '');
           var template = $('<span/>', {
               'class': 'ui-found',
               'text': matched
           }).after($('<span/>', {
               'text': rest  
           }));
           $this.html(template);
       });
    }

I found with the Internet but It's necessary to modify about Korean.
I tried several test and edit but that's not properly working
I can't adjust more specific about Korean.
Anybody help me about this question ?

reference book : jQuery UI 1.8 - The User Interface Library for jQuery
o'reilly jQuery UI



(function($){
var data = [
{ value: "Aberdeen", label: "Aberdeen" },
{ value: "Armagh", label: "Armagh" },
{ value: "Bangor", label: "Bangor" },
{ value: "Bath", label: "Bath" },
{ value: "Canterbury", label: "Canterbury" },
{ value: "Cardiff", label: "Cardiff" },
{ value: "Derby", label: "Derby" },
{ value: "Dundee", label: "Dundee" },
{ value: "Edinburgh", label: "Edinburgh" },
{ value: "Exeter", label: "Exeter" },
{ value: "Glasgow", label: "Glasgow" },
{ value: "Gloucester", label: "Gloucester" },
{ value: "Hereford", label: "Hereford" },
{ value: "Inverness", label: "Inverness" },
{ value: "Leeds", label: "Leeds" },
{ value: "London", label: "London" },
{ value: "Manchester", label: "Manchester" },
{ value: "Norwich", label: "Norwich" },
{ value: "Newport", label: "Newport" },
{ value: "Oxford", label: "Oxford" },
{ value: "Plymouth", label: "Plymouth" },
{ value: "Preston", label: "Preston" },
{ value: "Ripon", label: "Ripon" },
{ value: "Southampton", label: "Southampton" },
{ value: "Swansea", label: "Swansea" },
{ value: "Truro", label: "Truro" },
{ value: "Wakefield", label: "Wakefield" },
{ value: "Winchester", label: "Winchester" },
{ value: "York", label: "York" }
],
autoOpts = {
html: true,
source: function(req, resp) {
var suggestions = [],
regEx = new RegExp("^" + req.term, "i");
$.each(data, function(i, val){
if (val.label.match(regEx)) {
var obj = {};
obj.value = val.value;
obj.label = val.label.replace(regEx, "<span>" + req.term +
"</span>");
suggestions.push(obj);
}
});
resp(suggestions);
}
};
$("#city").autocomplete(autoOpts);
})(jQuery);


<style>
span { color:green !important; }
</style>

function reference brief summary


Option Function
options.disabled :  When set to true, disables the autocompletion mechanism. Users can enter characters into the text field, but no list appears. Use autocomplete ("enable") to enable the autocompletion mechanism.

options.source  : Indicates the data source to use for the list of suggestions. Data can be local (already known in the program) or remote (retrieved from the server).

options.minLength : Minimum number of characters to enter in the field to start the display of the list of suggestions. By default, this number is 1.

options.delay : Timeout (in milliseconds) before the entered characters are taken into account. By default, this delay is 300 ms.


options.open : The open (event) method is called when the list of suggestions will be displayed.

options.close : The close (event) method is called when the list of suggestions will be closed.

options.search : The search (event) method is called when a search should be done to display the corresponding list of suggestions. If the method returns false, the list is not displayed.

options.focus : The focus (event, ui) method is called when a list item has the focus, either from a mouseover or by selection with the arrow keys.
The ui.item value is a {label, value} object corresponding to the label text displayed in the list of suggestions, while value is the value that will be inserted into the input field if the list item is selected (label and value often have the same value, but this distinction allows more flexibility).

options.select : The select (event, ui) method is called when a list item is selected.
The ui.item value is a {label, value} object corresponding to the label text displayed in the list of suggestions, while value is the value that will be inserted into the input field if the list item is selected (label and value often have the same value, but this distinction allows more flexibility). If the method returns false, the contents of the input field are not changed.

options.change : The change (event) method is called when the input field loses focus (when the user clicks outside of it), while the field content has changed. This can occur if the user selects a new item in the list then enters new text in the field and leaves it.