Question

我想出了如何更改结果格式的方法：

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

我已经弄清楚了如何在结果底部添加一个链接：

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);
            };

问题在于，将链接添加到每个返回的结果中，而不是将其猛击到列表的末尾。

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

我需要做什么才能使链接成为列表中的最后一件事？

JS小提琴：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/

较小的清理并更好地分离了代码和样式。

希望这会有所帮助。

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

1 个答案: