无法使链接在jQuery自动完成中可单击
我正在覆盖jQuery Autocomplete以显示简单的链接(无法使链接在jQuery自动完成中可单击,jquery,jquery-ui,jquery-ui-autocomplete,Jquery,Jquery Ui,Jquery Ui Autocomplete,我正在覆盖jQuery Autocomplete以显示简单的链接(),并提供良好的答案,但它们处理默认的自动完成行为。source的答案看起来像是一个黑客——链接应该像链接一样工作 我的代码: $.widget( "custom.complete_custom", $.ui.autocomplete, { _renderMenu: function( ul, items ) { // Trigger a "See all" link if there ar
),并提供良好的答案,但它们处理默认的自动完成行为。source
的答案看起来像是一个黑客——链接应该像链接一样工作
我的代码:
$.widget( "custom.complete_custom", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
// Trigger a "See all" link if there are two many results
var self = this;
var too_long = false;
if (items.length > 10){
original_length = items.length;
too_long = true;
items = items.slice(0,10);
}
// Display each result as a link
$.each( items, function( index, item ) {
ul.append( "<li class='ui-autocomplete-category'><a href='/building/" + item.buildingcode + "'>" + item.buildingname + "</a></li>" );
});
// Add the "See all" link if necessary
if(too_long) {
ul.append( "<li class='ui-autocomplete-category see-all'><a href='/search/" + 'term' + "'><strong>See all " + original_length + " results</strong></a></li>" )
}
}
});
// The autocomplete activator
$( "#search" ).complete_custom({
source: "/search/json",
minLength: 2
});
$.widget(“custom.complete\u custom”,$.ui.autocomplete{
_renderMenu:功能(ul,项目){
//如果有两个或多个结果,则触发“全部查看”链接
var self=这个;
var太长=错误;
如果(项目长度>10){
原始长度=项目长度;
太长=正确;
items=items.slice(0,10);
}
//将每个结果显示为链接
$。每个(项目、功能(索引、项目){
ul.追加(“”;
});
//如有必要,添加“全部查看”链接
如果(太长){
ul.追加(“”)
}
}
});
//自动完成激活器
$(“#搜索”)。完成自定义({
来源:“/search/json”,
最小长度:2
});
jQuery UI autocomplete在相当多的地方内部使用了a
标记(查看其JS和CSS),因此尝试以他们不希望的方式更改它们的行为可能会产生不可预测的效果。函数
renderItem将每个自动完成项包装在a
标记中,这样您就可以将链接放在链接中了。我相信,花时间和精力是可能的,但当另一个答案有效且易于实现时,这肯定是一个更好的选择?即使使用JS重定向而不是直接链接也有点不妥。可能为时已晚,但可能对其他用户有用
我们通过以下代码获得:
$.ui.autocomplete.prototype._renderItem = function( ul, item ) {
var re = new RegExp("^" + "$&") ;
var t = item.label.replace(re,"<span>" + "$&" + "</span>");
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<A>" + item.label + "</A>" )
.appendTo( ul );
};
$.ui.autocomplete.prototype.\u renderItem=函数(ul,项){
var re=new RegExp(“^”+“$&”);
var t=item.label.replace(re,“+”$&“+”);
返回$(“”)
.data(“item.autocomplete”,item)
.append(“+item.label+”)
.附录(ul);
};
现在,您可以修改数组数据的“标签”字段内的内容
例如,我们在每个标签中添加了一些新表,但您也可以添加链接
再见没错,另一个答案更好。但它似乎与自定义渲染相冲突;我不知道如何将select函数应用于“查看全部”链接。