在 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>

由於用戶必須 Select 該項目，它有點挫敗按鈕點擊。

我建議您查看https://jqueryui.com/autocomplete/#multiple通過此示例，他們可以 select 列出要添加為稍后提交的值的項目列表。