автозаполнение jquery получить кликабельную ссылку на элемент - PullRequest
Новая
       21

автозаполнение jquery получить кликабельную ссылку на элемент

1 голос
/ 02 января 2012

Я использую экземпляр solr в качестве источника данных для плагина пользовательского интерфейса jquery autocompletion. из запроса я получаю метку и идентификатор для поискового значения обратно в виде строки json. в настоящее время оба значения отображаются в окне автозаполнения, например, если тип «re», я получаю метку, где находится «re» и идентификатор этого элемента в двух отдельных строках, например

Рез

12

то, чего я хотел бы добиться, это получить только метку элемента в качестве ссылки и идентификатор в качестве параметра для этой ссылки, поэтому, если я ищу «res», я получаю только ОДНУЮ запись в списке в качестве ссылки, и если я наведите курсор на то, что я получаю ссылку вроде: http://mydomain.com/result/12

одно решение, которое, как я думал, будет работать, - JQuery UI Autocompletion - добавление ссылки действия к каждому результату . даже с этим решением я получаю два списка результатов (результат searchterm и соответствующий идентификатор)

Я изменил код из приведенной выше ссылки на: 

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

Буду признателен за любую помощь по этому вопросу.

С наилучшими пожеланиями, Рамо

1 Ответ

6 голосов
/ 02 января 2012

Вы можете сделать что-то вроде этого: 

$.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/

...