添加复选框以自动完成-jQuery [英] Add checkbox to auto complete -jQuery
问题描述
我正在处理这段代码，并且我已经使用jQuery UI进行自动完成.现在，我需要一些帮助来添加复选框，以便我可以进行多项选择，并且它以逗号分隔的方式反映在我的字段上.我找到了恰好要创建的插件，但是我不想在[我的工作]中使用任何插件. http://www.igniteui.com/combo/selection-and-checkboxes
I am working on this code and I have used jQuery UI for autocomplete. Now I need some help in adding check-boxes to it so that i can do multiple selections and it reflect on my field with comma separation. I found a plugin exactly what I want to create but I don't want to use any plugin for [my work] http://www.igniteui.com/combo/selection-and-checkboxes
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="js/jquery-ui.css">
<body>
<input id="condition" type="text" placeholder="condition">
</body>
<script>
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$(document).ready(function () {
$('#condition').autocomplete({
source: availableTags,
minLength: 0
}).focus(function () {
try {
$(this).autocomplete("search");
}
catch (e) {
}
});
});
</script>
推荐答案
基本上，您首先需要更改jQuery自动完成功能的输出.
Basically you first need to alter the jQuery autocomplete's output.
类似这样的东西
$('yourElement').autocomplete({ /* autocomplete config here */ }).data( "autocomplete" )._renderItem = function( ul, item ) {
var checked = ($.inArray(item.label, selectedItems) >= 0 ? 'checked' : '');
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( '<a><input type="checkbox" ' + checked + '/>' + item.label + '</a>' )
.appendTo( ul );
};
然后，您必须将选取的元素存储在变量(数组)中
Then you have to store the picked elements in a variable (an array)
$('#yourElement').autocomplete({
// Configs
select:function(event, ui) {// Onselect event
// Don't forget to check if the item is already in the array
// and if it's the case to remove it
selectedItems.push(ui.item.label);
}
});
不要认为 selectItems 是一个数组，您需要在脚本中定义
Take not that selectItems is an array, you'll need define in your script
您可以在 JSFiddle 上看到此代码在自动完成列表中将输出什么
You can see on this JSFiddle what this code gonna output in the autocomplete's list
希望它会对您有所帮助
这篇关于添加复选框以自动完成-jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
