jquery - 添加指向 JQueryUI 自动完成项的链接

Question

当用户开始在搜索框中输入内容时，建议页面会返回与该名字匹配的所有集合中的最新项目以及其他数据。

我想显示该项目(及其图像)以及“查看此集合中的所有项目”的链接。

我可以使用以下代码来完成(大部分)操作:

$('#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
})

问题是，虽然链接出现在框中，但当单击它时，它会被忽略，并且执行默认的 select 操作(项目的 value 被放入进入文本框)。

Answer 1

看来你有几个选择。首先，您可以使用自动完成初始值设定项上的选择选项来指定自己的选择操作。

$(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> ，并将您喜欢的任何逻辑附加到单击事件。

如果您选择这种方式，您可能需要关闭默认的点击操作。我认为自动完成使用 <a>为提供点击事件的元素。在这种情况下，您需要取消设置该点击处理程序。