javascript - 在 jquery UI 自动完成功能中,在列表中每个项目的末尾添加一个按钮
问题描述
我已经使用 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]
解决方案
这是一个将 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在此示例中,他们可以选择要添加的项目列表作为稍后提交的值。
推荐阅读
- logging - 不同和多个日志记录输出
- sql - 即使不满足条件,如何将列值包含为 null?
- python - 将 XML 数据转换为 Pandas
- c# - 将占位符变量添加到 appSettings.json 文件
- r - R数据表,如何新建一列,答案取决于DT内的另一列
- csv - 如何反序列化actix Web表单数据并将其序列化为csv文件?
- javascript - 安装公共包时 NPM 显示 403
- c++ - 来自模板函数的意外结果
- computation-theory - NPDA for L= {w ∈ {a,b}*:a 的数量是 b 数量的两倍}
- android - 最小化应用程序上的前台服务销毁