添加一个链接到一个jQueryUI的自动完成项目

当用户开始输入的搜索框，建议页返回从匹配的非农产品市场准入的所有集合，再加上其他的最新数据项。添加一个链接到一个jQueryUI的自动完成项目

我想显示该项目（以及它的图像），并链接到“看到这个集合中的所有项目”。

我可以做的（大部分）与下面的代码：

$('#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被放入文本框）。

来源

2010-03-23 Tordek

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

$(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>为提供点击事件的元素。在这种情况下，您需要取消设置该点击处理程序。

来源

2010-03-23 04:38:50 Cheeso

嗨，你能不能看我的问题吗？你的回答似乎相关，但我不知道如何实施它。 http://stackoverflow.com/questions/6577761/how-can-i-make-this-link-clickable-in-jquery-ui-autocomplete-uncaught-typeerror – noli 2011-07-05 04:25:50

添加一个链接到一个jQueryUI的自动完成项目

回答

相关问题