jquery autocompletion每个项目都有可点击的链接

Question

我正在使用solr实例作为jquery autocompletion ui插件的数据源.从请求中我得到一个标签和一个搜索值的id作为json字符串.目前这两个值都显示在自动完成框中,例如,如果类型"re"我得到一个标签,其中"re"在,并且该项目的id在两个单独的行中,例如

水库

12

我想要实现的是只获取项目标签作为链接,并将id作为该链接的参数,所以如果我搜索"res",我只获得一个列表条目作为链接,如果我将其悬停我得到一个链接:http://mydomain.com/result/12

我认为可以使用的一个解决方案是JQuery UI Autocompletion - 为每个结果项添加一个动作链接.即使有了这个解决方案,我得到两个列表结果(searchterm结果和相应的id)

我将以上链接的代码修改为:

$("#product").autocomplete({
            source: '{{ path('MyRemotSource_search') }}',
            minLength: 2,

        })
     $.ui.autocomplete.prototype._renderItem = function (ul, item) {
         return $('<li><li />').data('item.autocomplete', item)
        .append('<li></li>').add('<a href="http://mydomain.de/result/'+item.value+'">'+ item.label+ '</a>')
    .appendTo(ul);
         };
   });

我很感激这个问题的任何帮助.

最好的问候,拉莫

Answer 1

你可以这样做:

$.ui.autocomplete.prototype._renderItem = function(ul, item) {
    var a = $('<a>', {
        href: "http://mydomain.de/result/" + item.value,
        text: item.label
    });
    var $li = $('<li>');
    return $li.append(a).data('item.autocomplete', item).appendTo(ul);
};

我设置了一个远程调用,只是为了显示它的工作原理

在这里小提琴http://jsfiddle.net/sRyfq/