自动完成结果中的jQuery UI粗体术语

时间:2012-05-03 20:49:16

标签: jquery user-interface autocomplete

我搜索了这个,但是我很难用它来处理我正在使用的代码。

我希望我的输入在自动完成结果中变为粗体,有人可以帮忙吗?感谢

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

但我没有运气。

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

_renderItem: function( ul, item) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( $( "<a></a>" ).text( item.label ) )
            .appendTo( ul );
    },

将其更改为:

_renderItem: function( ul, item) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( $( "<a></a>" ).html( item.label ) )
            .appendTo( ul );
    },