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');
    }
});

Here is a fiddle with the result.

我改为使用 selectize。它甚至支持 bootstrap!