Добавить ссылку на элемент автозаполнения JQueryUI

Question

Когда пользователь начинает печатать в окне поиска, страница предложения возвращает последний элемент из всех коллекций, соответствующих этому nama, а также другие данные.

Я хотел бы показать этот элемент (вдоль его изображения) и ссылку «посмотреть все элементы из этой коллекции».

Я могу сделать это (большинство из них) с помощью следующего кода:

$('#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 помещается в текстовое поле).

Answer 1

Похоже, у вас есть пара вариантов.Во-первых, вы можете указать свое собственное действие выбора, используя опцию выбора в инициализаторе автозаполнения.

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

Полагаю, в _renderItem вы могли бы сделать кликабельный <span> и прикрепить любую понравившуюся логику к событию click.

Если вы идете по этому маршруту, вам может потребоваться отключить действие щелчка по умолчанию.Я думаю, что автозаполнение использует <a> для элемента, который обеспечивает событие click.В этом случае вам нужно будет сбросить этот обработчик кликов.