javascript - 使用 Select2 从单个选择框中获取用户输入

Question

问题

我刚开始使用 Select2 ( http://ivaynberg.github.io/select2/ )，我正在尝试完成一项基本任务。

我有一个选择框，其中包含例如 3 个项目。我希望能够让用户选择 3 个结果中的 1 个或输入他们自己的结果，然后最终在提交时提交框中的任何值。

我尝试过的

<input style="width: 200px;" type="hidden" id="foo" />

<script type="text/javascript">
$(document).ready(function () {
        $("#foo").select2({
            query: function (query) {
                var data = { results: [{ text: 'math' }, { text: 'science' }, { text: 'english' }] };
                data.results.push({ text: query.term });
                query.callback(data);
            }
        });
    });
</script>

上面的代码允许我查看 3 个结果并自己输入一个结果。但是当我点击离开、按下回车键或选择我刚刚输入的结果时，我无法让输入的结果“坚持”。选择选项也是如此，但我最关心的是用户输入的文本。

这是它的样子:

Answer 1

参数 createSearchChoice 允许您做您想做的事。这是一个例子:

<script type="text/javascript">
    $("#foo").select2({
        createSearchChoice:function(term, data) {
            if ($(data).filter(function() {
                return this.text.localeCompare(term)===0; }).length===0) {
                    return {id:term, text:term};
                }
            },
        multiple: false,
        data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
    });
</script>

取自已关闭的问题:https://github.com/ivaynberg/select2/issues/201

fiddle :http://jsfiddle.net/pHSdP/2/

此外，请确保在输入中添加名称，否则您将看不到服务器端的值

<input style="width: 200px;" type="hidden" id="foo" name="foo" />