我正在尝试做与以下内容完全相同的事情: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
似乎您错过了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] 删除。
我来说两句