所以,我试图在我的catcomplete结果中使用HTML链接,但是jquery会自动将我的html代码转换为文本,就像在图像上一样:
我的jQuery代码是:
$( "#global-search" ).catcomplete({
delay: 0,
source: "globalsearch.php"
});
请不要告诉我使用select: function( event, ui ) {
window.location.href = ui.item.value;
}
,因为它在使用ajax时只运行一次(我真的不知道为什么,但它只是不起作用),我昨天在这里问了一些问题问如何解决它,没有人帮助我。
所以,回到html转换成文本后,如何在结果中添加html超链接?
globalsearch.php:
答案 0 :(得分:0)
看看Custom Data and Display example。您将看到他们已将_renderItem
方法替换为自定义方法。您需要做同样的事情来覆盖项目的显示方式。
$('#global-search').data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.data( "item.autocomplete", item )
.append((item.link) ? "<a href='" + item.link + "'>" + item.label + "</a>" : "<a>" + item.label + "</a>" )
.appendTo( ul );
};
如果没有看到globalsearch.php
的输出,我无法确切地告诉您如何设置它,但基本上您需要为返回的JSON添加link
属性以及链接存在,打印锚点,链接为href
。
如何处理选择链接与外部链接作为OP的练习。
答案 1 :(得分:0)
来自自动填充小部件文档
与您使用的变体无关,标签始终被视为 文本。如果您希望将标签视为html,则可以使用Scott González的html扩展名。演示都集中在不同的变化上 源选项 - 查找与您的用例匹配的选项,和 看看代码。
ScottGonzález的html扩展名为https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.html.js。我还发布了以下代码。
/*
* jQuery UI Autocomplete HTML Extension
*
* Copyright 2010, Scott González (http://scottgonzalez.com)
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* http://github.com/scottgonzalez/jquery-ui-extensions
*/
(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 );
编辑在使用扩展名
时尝试以下代码$( "#global-search" ).catcomplete({
delay: 0,
html: true,
source: "globalsearch.php"
});