在 jquery UI 自动完成功能中，在列表中每个项目的末尾添加一个按钮

Question

我已经使用 jQuery Ui 自动完成创建了列表，现在想在列表中每个项目的末尾显示 3 个按钮，我已经尝试了单个按钮的以下代码，但它对我不起作用，请指导我。

我使用 _renderItem 来渲染列表中每个项目末尾的按钮。

...).data("ui-autocomplete")._renderItem = function(ul,item){
var addTobag = $('<input/>').attr({type:'button', name:'bag',class:'btn btn-primary' , value:'Add to bag',style:'float : right'});
return $('<li></li>').append('<span>' + item.label + addTobag'</span>' )
};

它显示我的错误为 undefined[object object]

Answer 1

这是一个将 Button 元素添加到自动完成列表的示例。

$(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"
  ];
  $("#tags").autocomplete({
    source: availableTags
  }).autocomplete("instance")._renderItem = function(ul, item) {
    return $("<li>")
      .append("<div>" + item.label + "<input type='button' name='bag' class='btn btn-primary' value='Add to bag' style='float: right;' /></div>")
      .appendTo(ul);
  };
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

由于用户必须选择该项目，它有点击败按钮点击。

我建议您查看https://jqueryui.com/autocomplete/#multiple 使用此示例，他们可以选择要添加的项目列表作为稍后提交的值。