自动完成结果中的 jQuery UI 粗体字答案

【问题标题】：jQuery UI bold term in autocomplete results自动完成结果中的 jQuery UI 粗体字
【发布时间】：2012-07-27 08:55:20
【问题描述】：

我已经搜索过这个，但我很难让它与我正在使用的代码一起工作。

我希望我的输入在自动完成结果中显示为粗体，有人可以帮忙吗？谢谢

jQuery( '#description-input:not(.ui-autocomplete-input)' ).live( 'focus', jQuery.proxy( function( event ){
    jQuery( event.target ).trigger( this.config.events.AUTORESIZE ).autocomplete( {

        source: jQuery.proxy( function( request, response ) {
            jQuery.ajax({
                url: self.config.keyword_search_url,
                dataType: "json",
                data: { name_startsWith: request.q, q : jQuery('#description-input').val(), 
                    level: this.selectedStore.getLevelId() },
                select: function(event, ui) { event.stopPropagation(); },
                success: function( data ) {
                    response( jQuery.map( data, function( item ) {
                        return { value: item };
                    }));
                }
            });
        }, this),

        focus : jQuery.proxy(function(event, ui) {
            jQuery( 'body' ).undelegate( '#description-input', 'blur' );
            jQuery( 'ul.ui-autocomplete' ).one( 'mouseleave', jQuery.proxy(function(event) {
                jQuery( 'body' ).delegate( '#description-input', 'blur', jQuery.proxy(function(event) {
                    self.exitEditItem(event);
                }, this));
            }, this));
        }, this),

        select : jQuery.proxy(function(event, ui) {
            event.ui = ui;
            self.editItemSpecialKeys(event);

            jQuery( 'ul.ui-autocomplete' ).unbind( 'mouseleave' );
            jQuery( 'body' ).delegate( '#description-input', 'blur', jQuery.proxy(function(event) {
                self.exitEditItem(event);
            }, this));
        }, this),

        position : { 
            my: 'center top', 
            at: 'center bottom', 
            offset: '0 -1px',
            collision: 'flip'
        },

        delay: 0,
        minLength: 2,
        disabled: true
    }).autocomplete( 'widget' ).addClass( 'autocomplete-list' );

我试过用这个方法：

function __highlight(s, t) {
    var matcher = new RegExp("("+$.ui.autocomplete.escapeRegex(t)+")", "ig" );
    return s.replace(matcher, "$1");
}

但我没有运气。

【问题讨论】：

标签： jquery user-interface autocomplete

【解决方案1】：

           $.ajax({
                url: self.config.keyword_search_url,
                dataType: "json",
                data: { name_startsWith: request.q, q: jQuery('#description-input').val(),
                    level: this.selectedStore.getLevelId()
                },
                select: function (event, ui) { event.stopPropagation(); },
                success: function (data) {
                    response(jQuery.map(data, function (item) {
                        return { value: '<b>' + item + '</b>' };
                    }));
                }
            });

【讨论】：

等待你需要在 jquery ui auto complite 中修改一些代码然后它工作正常。我把代码或链接放在这里。
在 juery ui 中自动完成： _renderItem: function(ul, item) { return $( "
" ) .data( "item.autocomplete", item ) .append( $("").text(item.label)).appendTo(ul); },

将 .append( $( "" ).text( item.label )) 改为 .append( $( "" )。 html(item.label))

嘿，ThulasiRam，谢谢你的回答！它工作得很好，但在自动完成中，我看到的是实际的 html item 而不是粗体项目。有什么想法吗？