Question

我正在使用select2插件（ivaynberg.github.io/select2）。我正在尝试显示下拉列表（选择）。它将data.php中的所有项目作为选项。但是，select2意味着是自动完成插件，应该搜索客户端输入的搜索词，并仅显示匹配结果。目前它显示所有项目而没有获得搜索结果。对不起我的语言

data.php正在回应这个：

[{
    "id": "1",
    "text": "item1",
    "exercise": "blah text"
  }, {
    "id": "2",
    "text": "item2"
  }
]

代码是：

$(document).ready(function () {
    $('#thisid').select2({
        minimumInputLength: 2,
        ajax: {
            url: "data.php",
            dataType: 'json',
            data: function (term, page) {
                return {
                    q: term
                  };
            },
            results: function (data, page) {
                return {
                    results: data
                };
            }
        }
    });
});

输入为：

<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />

我想找到一个线索，我对这个插件很新，并花了一天时间查看示例。

Answer 1

如果附加到标准select表单控件，

select2将不会执行AJAX。它必须附加到隐藏的input控件以通过AJAX加载。

更新：这已在Select2 4.0中修复。来自Pre-Release notes：

与所有数据适配器的标准<select>元素保持一致，无需隐藏<input>元素。

也可以在examples section中找到它。

Answer 2

我想user2315153想要接收多个远程值，并且错误地将select2（）与ajax调用分配给＆lt; select ＆gt;元件。

获取远程值的正确方法是使用普通＆lt; 输入＆gt;如果需要多个值，则在方法调用上通知“multiple”参数。例如：

<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
<script>
$('#thisid').select2({
        minimumInputLength: 2,
        multiple: true,
        ajax: {
              ...

＆lt; 选择＆gt;元素不能用于远程值

更新：自select2 4.0.0起，隐藏的输入已被弃用：

https://select2.github.io/announcements-4.0.html#hidden-input

这意味着：使用SELECT标记，而不是使用输入来选择select2插件。

注意：从服务器上使用任何格式的json都很容易。只需使用“processResults”即可。

示例：

<select id='thisid' class='select2-input select2'></select>
<script>
        $("#thisid").select2({
            multiple: true,
            closeOnSelect: true,

            ajax: { 
                url: "myurl",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                      q: params.term,
                      page: params.page
                    };
                  },
                processResults: function (data, page) { //json parse
                    console.log("processing results");
                    //Transform your json here, maybe using $.map jquery method
                    return { 
                       results: yourTransformedJson
                    };
                },
                cache: (maybe)true
            }
        });
</script>

Answer 3

我尝试了代码，效果很好。我认为你不包括jquery框架或检查js和css的路径。

<!DOCTYPE html>
<html>
<head>
    <link href="select2.css" rel="stylesheet"/>
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
    <script src="select2.min.js"></script>
    <script>
        $(document).ready(function() { 
            $('#thisid').select2({
                minimumInputLength: 2,
        ajax: {
            url: "data.php",
            dataType: 'json',
            data: function (term, page) {
                return {
                    q: term
                  };
            },
            results: function (data, page) {
                return {
                    results: data
                };
            }
        }
    });

        });
    </script>
</head>
<body>
    <input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />

</body>
</html>

Answer 4

我认为不需要使用隐藏的输入元素。你可以尝试一下，从ajax调用中获取普通的html数据并将其设置为，然后执行init select2重置方法。这是代码片段

<强> HTML

<select id="select" name="select" class="select2">
        <option value="" selected disabled>Please Select Above Field</option>
</select>

<强>的Javascript

    $.ajax({
        type: "POST",
        cache:false,
        url: YOUR_AJAX_URL,
        success: function(response)
        {
            $('#select').html(response);
        }
    });
    $('#select').select2("val","");

Ajax响应：

<option value="value">Option Name</option>
.
.
.
<option value="value">Option Name</option>

Answer 5

经过多次阅读，我决定更改select2.js本身。

在2109行将其更改为

this.focusser.attr("id", "s2id_"+this.select.context.id);

如果你的输入标签是这样

<select id="fichier">

因此，搜索整个列表的输入代码的ID为 s2id_fichier_search

据我所知，不应该是冲突，这将允许你在同一页面上有多个select2并通过他们的事件运行你的函数（包括.get，。post），例如。

$(function() { 
  $('#s2id_fichier_search').keyup(function() {
    console.log('Be Practical')
  })
}

所以这会像你使用

一样运行

<select id="fichier" onkeyup="console.log('Be Practical')">

Answer 6

就我而言，是select2库的较旧版本引起了此问题，请确保在网页中包含最新版本的js和css。

jquery select2 - 不工作

6 个答案: