Jquery UI 自动完成 - 如何格式化结果并在末尾添加按钮？

Question

我已经找到更改结果格式的方法：

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

而且我想出了如何在结果底部添加 link：

Jquery Auto complete append link at the bottom

我想不通的是如何同时进行。

我最接近的是：

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

问题是将 link 添加到每个 individual 返回结果中，而不是将其添加到列表末尾。

我尝试了各种包装 link（li、div 等）的方法，但没有任何效果。

我需要做什么才能将 link 作为列表中的最后一项？

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() 是正确的。根据您 link 编辑的示例，我从此处删除了 Link。如示例所示，我将其移至 open 回调。我还切换了你的一些代码。没有错，我只是更喜欢这种方法。

因此项目得到渲染，以便图像和标签按需要显示。 open 回调添加最终的 link 项目，导致搜索所有项目。查看更多：http://api.jqueryui.com/autocomplete/#method-search

Can be called with an empty string and minLength: 0 to display all items.

当一个项目被选中时，返回首选 minLength 以确保如果用户开始新的搜索，它的操作方式与第一次相同。

更新

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

代码和样式的小清理和更好的分离。

希望对您有所帮助。

Jquery UI 自动完成 - 如何格式化结果并在末尾添加按钮？

Jquery UI Autocomplete- How to format results AND add button at end?

jquery-ui

autocomplete