jQuery UI,HTML自动完成

Woshitom

我正在尝试做与以下内容完全相同的事情:http : //dev.nemikor.com/jquery-ui-extensions/autocomplete/html.html

但是它不起作用,标签和值会显示在自动完成功能中,即当我输入“ a”时:输入下方的框中会显示“ aardvark”,“ <b> apple”和“ <i> atom”。

我的HTML是:

<form>
    <input type="text" id="recherche" />
</form>

我的jQuery是:

      $('#recherche').autocomplete({
        source: [
            {
                label: "aardvark", 
                value: "aardvark"
            },
            {
                label: "<b>apple</b>",
                value: "apple"
            },
            {
                label: "<i>atom</i>",
                value: "atom"
            }
        ],
        html: true
    });

我正在使用jQuery UI 1.11.4

vivekkupadhyay

似乎您错过了jquery.ui.autocomplete.html.js,因为您在问题中提供已经使用了它。

在这里,我创建了一个JSFiddle

标记:

<form>
    <input id="recherche" />
</form>

JavaScript代码:

(function( $ ) {

var proto = $.ui.autocomplete.prototype,
    initSource = proto._initSource;

function filter( array, term ) {
    var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
    return $.grep( array, function(value) {
        return matcher.test( $( "<div>" ).html( value.label || value.value || value ).text() );
    });
}

$.extend( proto, {
    _initSource: function() {
        if ( this.options.html && $.isArray(this.options.source) ) {
            this.source = function( request, response ) {
                response( filter( this.options.source, request.term ) );
            };
        } else {
            initSource.call( this );
        }
    },

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

})( jQuery );

$('#recherche').autocomplete({
        source: [
            {
                label: "aardvark", 
                value: "aardvark"
            },
            {
                label: "<b>apple</b>",
                value: "apple"
            },
            {
                label: "<i>atom</i>",
                value: "atom"
            }
        ],
        html: true
    });

使用该jquery.ui.autocomplete js及其正常工作。

请看看,它将为您解决问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章