JQuery UI Автозаполнение стилей выбрать цвет

Question

Я бы хотел изменить цвет предлагаемых голосов, следуя данным, представленным в исходном XML-файле. Мой код может объяснить мою проблему лучше:

$("#search_input").autocomplete({
    source: function(req, add){  
    //pass request to server  
    $.get(stringa, req, function(xml) {  
             var dato = $("contratto", xml).map(function() {
                    return {
                            label: $( "id", this ).text()+ ", "+ $( "nominativo", this ).text(),
                            value: $( "id", this ).text(),
                            cls: $("class", this).text()
                    };
            }).get();  
            //pass array to callback  
            add(dato);  
        });
    },
    minLength: 0,
    select: function( event, ui ) {
        $("#search_input").val(ui.item.label);
            $("#hidden_contratto").val(ui.item.value);
            //$(".ui-menu-item >a").css("color", "red");
   },
    open: function(event, ui) {
        switch (ui.item.cls)
        {
        //here must change color to propose if eoncontered cls=red
            case "red" :
                $(".ui-autocomplete li.ui-menu-item a").css({"color": "red", "text-decoration": "line-through"});
            break;
        }
    }
});

здесь исходный код xml:

<contratto>
    <id>M12125</id>
    <nominativo>my name</nominativo>
    <class>red</class>
</contratto>

В firebug я получаю эту ошибку: ui.item не определен

Answer 1

После нескольких попыток я нашел свое решение!

Я покрыл число в классе и исправил свой код следующим образом:

open: function( event, ui ) {
           var voce="";
           var v="";
           $("li > a").each(function(){
               v=$(this).text();
               voce=v.split(",");
               if (voce[2]==1)
                   $(this).css({"color": "green", "text-decoration": "underline"});
               if (voce[2]==2)
                   $(this).css({"color": "red", "text-decoration": "line-through"});
               $(this).text(voce[0]+", "+voce[1]);
           });
        }

Я надеюсь, что это кому-нибудь поможет!

чао ч.

Answer 2

Событие открытия не помогает (http://api.jqueryui.com/1.11/autocomplete/#event-open - " Примечание: объект пользовательского интерфейса пуст, но включен для согласованности с другими событиями. "

Вам нужно расширить оригинальный виджет и переопределить функцию _renderItem ()

$.widget("custom.myAutocomplete", $.ui.autocomplete, { 
        //since now is it copy of autocomplete widget just with different name
        //lets override:
    _renderItem: function (ul, item) {
        let result = $("<li>")
            .attr("data-value", item.value)
            .append(item.label)
            .appendTo(ul);

        //here comes the customization
        if ("red" === item.cls) {
            result.css('color', "red");
        }
        return result;
    }

});

и затем вы инициализируете этот новый виджет, а не оригинал:

$("#search_input").myAutocomplete({
//....source and minLengt

Ссылки:

• http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/
• http://api.jqueryui.com/1.11/autocomplete/#method-_renderItem

Answer 3

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