使用 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

小提琴：http://jsfiddle.net/pHSdP/2/

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

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

Answer 2

只是给有不同数据输入的其他人的快速说明。如果控制台显示“this.text is undefined”，请确保检查您的文本标签，如下所示：

<script type="text/javascript">
    // Data input taken from "label", not "text" like usual
    var lstData = [{id: 0, 'label': 'story'},{id: 1, 'label': 'bug'},{id: 2, 'label': 'task'}];
    $("#foo").select2({
        createSearchChoice:function(term, data) {
            if ($(data).filter(function() {
                return this.label.localeCompare(term)===0; }).length===0) {
                    return {id:term, 'label':term};
                }
            },
        data: { results: lstData, text: 'label' }
    });
</script>

Answer 3

您正在使用的库用于过滤选择框中的选项。它不需要新的输入，按照他们自己的documentation：

Select2 是基于 jQuery 的选择框替代品。它支持搜索、远程​​数据集和无限滚动结果。

我建议你使用jQueryUI Autocomplete 或TypeAhead