我正在使用the chosen plugin。
将其添加到我的文档中后,我无法在文本字段中键入内容并将新项目添加到列表中。
$(document).ready(function (){
$(".chosen-select").trigger("chosen:updated");
});
这将允许一些硬编码的文本添加到列表中:
$(document).ready(function (){
$('.chosen-select').chosen();
$('.addsomething').click(function (){
$(".chosen-select").prepend("<option>Utopia</option>");
$(".chosen-select").trigger("chosen:updated");
});
});
我想看到的是,我希望能够将文本添加到文本字段,按回车键,如果我没有选择它,则添加我的输入。不需要将其永久添加到选项列表中。
不确定是否可以以更简单的方式完成此操作,但这很好。代码中的注释解释了每个步骤:
var select, chosen;
// Cache the select element as we'll be using it a few times
select = $(".chosen-select");
// Init the chosen plugin
select.chosen({ no_results_text: 'Press Enter to add new entry:' });
// Get the chosen object
chosen = select.data('chosen');
// Bind the keyup event to the search box input
chosen.dropdown.find('input').on('keyup', function(e)
{
// If we hit Enter and the results list is empty (no matches) add the option
if (e.which === 13 && chosen.dropdown.find('li.no-results').length > 0)
{
var option = $("<option>").val(this.value).text(this.value);
// Add the new option
select.prepend(option);
// Automatically select it
select.find(option).prop('selected', true);
// Trigger the update
select.trigger("chosen:updated");
}
});
这是一个有效的示例:http://jsfiddle.net/jHvmg/436/
我修改了Bogdan的the answer以使其与所选的1.2.0以及所有类型的所选选择一起使用:
var select, chosen;
// cache the select element as we'll be using it a few times
select = $(".chosen-select");
// init the chosen plugin
select.chosen();
// get the chosen object (any type, single or multiple)
chosen = $('.chosen-container');
// chosen = $('.chosen-select-single');
// chosen = $('.chosen-container-multi');
// Bind the keyup event to the search box input
chosen.find('input').keyup( function(e)
{
// if we hit Enter and the results list is empty (no matches) add the option
if (e.which === 13 && chosen.find('li.no-results').length > 0)
{
var option = $("<option>").val(this.value).text(this.value);
// add the new option
select.prepend(option);
// automatically select it
select.find(option).prop('selected', true);
// trigger the update
select.trigger("chosen:updated");
}
});
一个简单的替代方法是使用select2,它具有内置的标签:https://select2.github.io/examples.html#tags
$(".js-example-tags").select2({
tags: true
})
这里有一篇文章,如何在此处将新值添加到选定的选择列表:
https://boundlessjourney.wordpress.com/2014/06/12/adding-new-values-to-chosen-plugin/
基本上,您编辑selected.jquery.js文件并搜索case 13:
,并将开关盒中的代码替换为
case 13:
evt.preventDefault();
if (this.results_showing) {
if (!this.is_multiple || this.result_highlight) {
return this.result_select(evt);
}
$(this.form_field).append('<option>' + $(evt.target).val() + '</option>');
$(this.form_field).trigger('chosen:updated');
this.result_highlight = this.search_results.find('li.active-result').last();
return this.result_select(evt);
}
break;
这是针对多选的,但就我而言,我希望能够添加一个选项。我在注释中找到了答案,但缺少代码,并且添加了将每个单词大写的功能。
这可以通过将开关盒中的代码替换为:
case 13:
evt.preventDefault();
if (this.results_showing) {
if (this.result_highlight) {
return this.result_select(evt);
}
$(this.form_field).append('<option>' + ($(evt.target).val()).replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) + '</option>');
$(this.form_field).trigger('chosen:updated');
this.result_highlight = this.search_results.find('li.active-result').last();
return this.result_select(evt);
}
break;
也许可以编辑代码,使其可以接受多选和单选
在chosen.jquery.js
功能的AbstractChosen.prototype.choice_label
文件中,您可以更改所选文本
喜欢这个
AbstractChosen.prototype.choice_label = function(item) {
if (this.include_group_label_in_selected && (item.group_label != null)) {
return "<b class='group-name'>" + (this.escape_html(item.group_label)) + "</b>" + item.html;
} else {
return item.html.replace(/ *\([^)]*\) */g, "");;//Ashkufaraz Remove Post From Selected Text
// return item.html;
}
};
$('.choose').chosen();
$('.choose').on('chosen:no_results',function(evt, params)
{var value = params.chosen.search_results.find('span').text();
$('.choose').append(new Option(value, value,true).outerHTML);
$('.choose').trigger("chosen:updated");
});