8

问题

我刚开始使用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 个结果并自己输入一个结果。但是当我点击离开、按回车或选择我刚刚输入的结果时，我无法让输入的结果“粘贴”。选择选项也是如此，但我最关心的是用户输入的文本。

这是它的样子：

http://i.imgur.com/XPnPR8H.png

4

3 回答 3

7

参数 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" />
于 2013-09-20T17:42:30.517 回答
1

只是给其他有不同数据输入的人的快速说明。如果控制台显示“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>
于 2013-12-13T07:14:27.610 回答
0

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

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

我建议你使用jQueryUI Autocomplete或TypeAhead

于 2013-09-20T12:52:23.743 回答