如何在jQuery autocomplete中添加额外的<li>元素？

嘿，我懂你想给autocomplete的下拉列表末尾加个自定义<li>的需求！你已经找对方向了——重写_renderMenu方法就是实现这个功能的关键，我来帮你补全完整的可运行代码，还能保证不破坏原有的自动补全功能：

完整实现代码 #

$(function() {
  // 你的备选标签列表
  var availableTags = [
    "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++",
    "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy",
    "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python",
    "Ruby", "Scala", "Scheme"
  ];

  // 重写autocomplete的_renderMenu方法
  $.ui.autocomplete.prototype._renderMenu = function(ul, items) {
    var that = this;
    // 先渲染默认的所有选项，保留原有功能
    $.each(items, function(index, item) {
      that._renderItemData(ul, item);
    });
    // 追加自定义的<li>元素
    $("<li>")
      .addClass("custom-autocomplete-footer") // 自定义类名，方便样式定制
      .append("<div>👉 查看更多编程语言</div>") // 自定义内容，可按需修改
      .on("click", function() {
        // 这里添加点击自定义项后的逻辑，比如弹窗、跳转或加载更多
        alert("你触发了自定义项的点击事件！");
      })
      .appendTo(ul);
  };

  // 初始化autocomplete组件
  $("#tags").autocomplete({
    source: availableTags
  });
});

关键细节说明 #

• 我们先调用了原有的_renderItemData方法渲染所有默认选项，这样不会丢失autocomplete的原生功能。
• 自定义的<li>可以添加专属CSS类，方便你设置和默认选项区分的样式，比如斜体、不同颜色：

.custom-autocomplete-footer {
  font-style: italic;
  color: #555;
  padding: 8px 12px;
  cursor: pointer;
  border-top: 1px solid #eee;
}

.custom-autocomplete-footer:hover {
  background-color: #f8f8f8;
}

• 如果不需要点击事件，直接去掉.on("click", ...)部分即可。

这样你的autocomplete下拉列表末尾就会出现一个完全自定义的选项啦！

内容的提问来源于stack exchange，提问作者Paili