JQuery UI Autocomplete - Как отформатировать результаты и добавить кнопку в конце?

Question

Я выяснил, как изменить форматирование моих результатов:

https://github.com/salmanarshad2000/demos/blob/v1.0.4/jquery-ui-autocomplete/custom-html-in-dropdown.html

И я выяснил, как добавить ссылку внизу результатов:

Ссылка JQuery Auto Complete для добавления внизу

Что я не могу понять, так это то, как сделать оба одновременно.

Самое близкое, что я пришел, это следующее:

$( "#search1" ).autocomplete({
            source: products,
          minLength: 3,
      select: function( event, ui ) {
                event.preventDefault();
       },
       focus: function(event, ui) {
                event.preventDefault();
            }
    }).data("ui-autocomplete")._renderItem = function(ul, item) {

        console.log(ul.content)
        var $div = $("<div></div>");

        $("<img style='height:76px;'>").attr("src", item.image).appendTo($div);
        $("<span></span>").text(item.label).appendTo($div);

        ($div).append( "<a href='https://google.com'>Click Me</a>" )

        return $("<li></li>").append($div).appendTo(ul);
            };

Проблема в том, что ссылка добавляется к каждому возвращаемому результату, а не помещается в конец списка.

Я пробовал разные варианты переноса ссылки (li, div и т. Д.), Но ничего не работает.

Что мне нужно сделать, чтобы получить ссылку как последнюю вещь в списке?

JS Fiddle: http://jsfiddle.net/spgbq6w7/13/

Answer 1

Рассмотрим следующий код.

Рабочий пример: http://jsfiddle.net/Twisty/wur8vok9/23/

HTML

Search: <input id="search1">

JavaScript

var products = [{
    value: "MS-Word",
    label: "Microsoft Word 2013",
    image: "https://upload.wikimedia.org/wikipedia/commons/4/4f/Microsoft_Word_2013_logo.svg"
  },
  {
    value: "MS-Excel",
    label: "Microsoft Excel 2013",
    image: "https://upload.wikimedia.org/wikipedia/commons/8/86/Microsoft_Excel_2013_logo.svg"
  },
  {
    value: "MS-Outlook",
    label: "Microsoft Outlook 2013",
    image: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Microsoft_Outlook_2013_logo.svg"
  },
  {
    value: "MS-PowerPoint",
    label: "Microsoft Word 2013",
    image: "https://upload.wikimedia.org/wikipedia/commons/b/b0/Microsoft_PowerPoint_2013_logo.svg"
  },
  {
    value: "MS-Access",
    label: "Microsoft Access2013",
    image: "https://upload.wikimedia.org/wikipedia/commons/3/37/Microsoft_Access_2013_logo.svg"
  },
  {
    value: "Adobe-PSP",
    label: "Adobe Photoshop CC",
    image: "https://upload.wikimedia.org/wikipedia/commons/a/af/Adobe_Photoshop_CC_icon.svg"
  },
  {
    value: "Adobe-LR",
    label: "Adobe Lightroom CC",
    image: "https://upload.wikimedia.org/wikipedia/commons/5/56/Adobe_Photoshop_Lightroom_Classic_CC_icon.svg"
  },
  {
    value: "Adobe-PRM",
    label: "Adobe Premiere Pro CC",
    image: "https://upload.wikimedia.org/wikipedia/commons/5/58/Adobe_Premiere_Pro_CS6_Icon.png"
  },
  {
    value: "Adobe-ACR",
    label: "Adobe Acrobat",
    image: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Adobe_Acrobat_v8.0_icon.svg"
  },
  {
    value: "Adobe-ILS",
    label: "Adobe Illustrator CS6",
    image: "https://upload.wikimedia.org/wikipedia/commons/d/d8/Adobe_Illustrator_Icon_CS6.png"
  }
];

$(function() {
  $("#search1").autocomplete({
    source: products,
    minLength: 3,
    open: function() {
      var $li = $("<li>");
      var $link = $("<a>", {
        href: "#",
        class: "see-all"
      }).html("See All Results").click(function(e) {
        e.preventDefault();
        $("#search1").autocomplete("option", "minLength", 0);
        $("#search1").autocomplete("search", "");
      }).appendTo($li);
      $li.appendTo($('.ui-autocomplete'));
    },
    select: function(event, ui) {
      event.preventDefault();
      $("#search1").autocomplete("option", "minLength", 3);
    },
    focus: function(event, ui) {
      event.preventDefault();
    }
  }).data("ui-autocomplete")._renderItem = function(ul, item) {
    console.log(ul.content)
    var $div = $("<div>").css("position", " relative");

    $("<img>", {
      src: item.image
    }).css("height", "38px").appendTo($div);
    $("<span>").css({
      position: "absolute",
      top: 0,
      display: "inline-block",
      "margin-left": "3px"
    }).text(item.label).appendTo($div);

    return $("<li>").append($div).appendTo(ul);
  };
});

Итак, вы правильно используете _renderItem().Я удалил ссылку отсюда на основе примера, на который вы ссылались.Я переместил это в обратный вызов open, как показано в примере.Я также переключил некоторые из вашего кода.Это не было неправильно, я просто предпочитаю этот метод.

Таким образом, элементы отображаются так, что изображение и метка отображаются по желанию.Обратный вызов open добавляет последний элемент ссылки, который вызывает поиск всех элементов.См .: http://api.jqueryui.com/autocomplete/#method-search

Может вызываться с пустой строкой и minLength: 0 для отображения всех элементов.

Когда элемент выбран, предпочтительный minLength возвращается, чтобы гарантировать, что если пользователь начинает новый поиск, он работает так же, как и в первый раз.

Обновление

http://jsfiddle.net/Twisty/wur8vok9/40/

Незначительная очистка и лучшее разделение кода и стиля.

Надеюсь, это поможет.