当用户开始在搜索框上键入时,建议页面将返回与该nama匹配的所有集合中的最新项目以及其他数据.
我想显示该项目(沿着其图像),以及“查看此集合中的所有项目”的链接.
我可以使用以下代码完成(大部分)：
$('#search').autocomplete({
source: function (request,response) {
$.ajax({
url: suggesturl,dataType: 'json',data: request,success: function (data) {
response(data.map(function (value) {
return {
'label': '<img src="' + value.thumbsmall + '" />' + value.name + '<a href="/">More items from this collection...</a>','value': value.fullname
};
}));
}
});
},minLength: 3
})
问题是,虽然链接出现在框中,但当它被单击时,它会被忽略,并执行默认的选择操作(项目的值被放入文本框中).
解决方法
好像你有几个选择.首先,您可以使用自动完成初始值设定项上的选择选项指定自己的选择操作.
$(selector).autocomplete({
source: ...,select: function(value,data){
if (typeof data == "undefined") {
emitMessage('You selected: ' + value + "<br/>");
} else {
emitMessage('You selected: ' + data.item.value + "<br/>");
}
}
});
如果这还不够,出于某种原因,那么您可以为自动完成列表呈现自己的内容,并以这种方式获得所需的控制权.
你通过猴子修补_renderItem fn来做到这一点,这是自动完成调用以呈现列表中的每个项目.检查this answer是如何做到的.它适用于v1.8rc3.
我想在_renderItem中你可以渲染一个可点击的< span>,并将你喜欢的任何逻辑附加到click事件中.
如果你走这条路,你可能需要关闭默认的点击动作.我认为自动填充使用< a>对于提供click事件的元素.在这种情况下,您需要取消设置该单击处理程序.
