包含链接的jQuery目录
因此，我尝试在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：
回答 2
Stack Overflow用户
发布于 2012-12-05 00:55:23
看一看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。
如何处理选择链接与外部链接，留给操作员作为练习。
Stack Overflow用户
发布于 2012-12-05 02:16:25
来自autocomplete小部件文档
与您使用的变体无关，标签始终被视为文本。如果您希望标签被视为html，您可以使用Scott González的html扩展。所有的演示都集中在源选项的不同变体上-寻找与您的用例匹配的一个，并查看代码。
Scott Gonzá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"
});https://stackoverflow.com/questions/13705346
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号