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

Posted 2021-03-31

我已经想出如何更改结果的格式：

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/

答案

请考虑以下代码。

工作示例：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/

轻微清理并更好地分离代码和样式。

希望这可以帮助。