使用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未定义”，请确保检查文本标签，如下所示：

<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

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

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

我建议你使用jQueryUI Autocomplete或TypeAhead