chosen:updated 触发器阻止文本在输入中呈现
chosen:updated trigger blocks text from being rendered in input
我正在监听所选生成的输入元素的变化。不知何故,当我触发 chosen:updated
时,输入元素中的文本不会呈现。
一个简单的演示:
<div style="width: 400px" class="parent row">
<div class="col-lg-12">
<select multiple="multiple" class="tags"></select>
</div>
</div>
javascript:
$(".tags").chosen({
width: '50%',
});
var select = $(".tags");
var input = $(".parent input");
input.on('input', function() {
var option = $("<option value='bob'>bob</option>");
select.append(option);
// Below causes input to stop rendering text in input element
select.trigger('chosen:updated');
});
这里是jsfiddle demo。我可能没有正确地做到这一点。我想要完成的是在输入框中进行一些编辑后获取当前文本,将其发送到服务器进行处理,然后将结果呈现为已选择的选项。
如何使用 chosen 执行此操作?上面的方法有效,只是在用户键入内容后没有呈现文本。
您可以让用户键入内容,并在用户按下回车键时将其添加到 select 选项列表中。所以喜欢:
$(".tags").chosen({ width: '50%',
});
var select = $(".tags");
var input = $(".parent input");
input.keydown(function(e) {
if(e.keyCode == 13){
var option = $("<option></option>").html(input.val());
select.append(option);
select.trigger('chosen:updated');
}
});
我改为使用 selectize。它甚至支持 bootstrap!
我正在监听所选生成的输入元素的变化。不知何故,当我触发 chosen:updated
时,输入元素中的文本不会呈现。
一个简单的演示:
<div style="width: 400px" class="parent row">
<div class="col-lg-12">
<select multiple="multiple" class="tags"></select>
</div>
</div>
javascript:
$(".tags").chosen({
width: '50%',
});
var select = $(".tags");
var input = $(".parent input");
input.on('input', function() {
var option = $("<option value='bob'>bob</option>");
select.append(option);
// Below causes input to stop rendering text in input element
select.trigger('chosen:updated');
});
这里是jsfiddle demo。我可能没有正确地做到这一点。我想要完成的是在输入框中进行一些编辑后获取当前文本,将其发送到服务器进行处理,然后将结果呈现为已选择的选项。
如何使用 chosen 执行此操作?上面的方法有效,只是在用户键入内容后没有呈现文本。
您可以让用户键入内容,并在用户按下回车键时将其添加到 select 选项列表中。所以喜欢:
$(".tags").chosen({ width: '50%',
});
var select = $(".tags");
var input = $(".parent input");
input.keydown(function(e) {
if(e.keyCode == 13){
var option = $("<option></option>").html(input.val());
select.append(option);
select.trigger('chosen:updated');
}
});
我改为使用 selectize。它甚至支持 bootstrap!