使用Select2从单选框获取用户输入

Question

问题

我刚开始使用 Select2 (http://ivaynberg.github.io/select2/)，想完成一个基本任务。

我有一个选择框，例如，里面有3个项目。我希望用户可以选择其中之一，或者输入自己的结果，然后最终在提交时将框中的任何值提交。

我尝试过的方法

<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个结果并输入一个结果。但是当我点击其他地方、按下回车或选择刚刚输入的结果时，无法让输入的结果“保留”。对于选择选项也是一样，但我最关心的是用户输入的文本。

以下是示例图像：

- james

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" />

- Daru

Answer 2

对于那些遇到不同数据输入的人，我有一个快速提示。如果控制台显示“this.text未定义”，请确保检查您的文本标签，如下所示：

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

- Duc Hong

Answer 3

您正在使用的库用于过滤选择框中的选项。根据他们自己的文档，它不接受新输入：

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

我建议您使用jQueryUI自动完成或TypeAhead。

- Srihari

---

这些只是用于自动完成用户输入的。我希望允许用户：a.) 在下拉列表中点击选项；b.) 输入他们自己的选项而不是选择一个选项 --- 我知道还有其他库可以做到这一点，但我最喜欢Select2的大部分功能。这个例子展示了它如何添加到列表中（http://ivaynberg.github.io/select2/#data），但我无法让这个例子简单地工作，而不是重复多次用户的输入。谢谢你的评论，我很感激！ - james