添加一个链接到一个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".

我可以做（大多数）与下列code：

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
})

问题在于，虽然链接出现在框中，当它被点击它就会被忽略，默认选择执行动作（项目的值放入文本框）。

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新生力量，这是自动完成的要求来呈现列表中的每个项目的内容。检查<一href=\"http://stackoverflow.com/questions/2435964/jquery-ui-autocomplete-plug-in-format-results/2436493#2436493\">this回答如何做到这一点。它工作在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你可以呈现一个可点击＆LT;跨度＆GT; ，并附上你喜欢的Click事件的任何逻辑。

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

如果你走这条路，你可能有一个需要关闭默认的点击动作。我想自动完成使用了＆LT; A＆GT; 为它提供了点击事件的元素。在这种情况下，你需要取消设置的点击处理程序。

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屋！