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>

在萤火虫中我收到此错误： 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

        ,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);
            });
        }

Answer 3

open事件无效（http://api.jqueryui.com/1.11/autocomplete/#event-open - ＆＃34; 注意：ui对象为空，但包含与其他事件保持一致。＆＃34;

您需要扩展原始窗口小部件并覆盖_renderItem（）函数

Warning XTDE0540: Ambiguous rule match for /html/body[1]/div[2]/p[219] Matches both p span "UCitation" and p span "USous-article"

然后你初始化这个新小部件，而不是原始小部件：

$.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;
    }

});

链接：

jquery ui自动完成样式选择颜色

3 个答案: