添加指向 JQueryUI 自动完成项的链接 [英] Add a link to a JQueryUI autocomplete item

问题描述

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

When a user starts typing on the searchbox, the suggestion page returns the latest item from all collections matching that nama, plus other data.

我想展示那件物品(沿着它的图片)，以及一个查看此收藏中的所有物品"的链接.

I'd like to show that item (along its image), and a link to "see all items from this collection".

我可以使用以下代码(大部分)做到这一点:

I can do (most of) that with the following code:

$('#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 被放入进入文本框).

The problem is that, although the link appears in the box, when it's clicked it gets ignored, and the default select action is executed (the item's value is put into the textbox).

推荐答案

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

Seems like you have a couple options. First, you can specify your own select action, using a select option on the autocomplete initializer.

$(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 来实现，这是自动完成调用以呈现列表中的每个项目.查看这个答案了解如何操作.它适用于 v1.8rc3.

If that is not sufficient, for some reason, then you can render your own content for the autocomplete list, and in that way get as much control as you need.
You do that by monkey-patching the _renderItem fn, which is what autocomplete calls to render each item in the list. Check this answer for how to do it. It works in v1.8rc3.

我想在 _renderItem 中你可以渲染一个可点击的 ，并将你喜欢的任何逻辑附加到点击事件.

I suppose in _renderItem you could render a clickable <span>, and attach any logic you like to the click event.

如果你走那条路，你可能需要关闭默认的点击动作.我认为自动完成对提供点击事件的元素使用 .在这种情况下，您需要取消设置该点击处理程序.

If you go that route, you may have a need to turn OFF the default click action. I think autocomplete uses an <a> for the element that provides the click event. In that case, you'll need to unset that click handler.

这篇关于添加指向 JQueryUI 自动完成项的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！