jquery select2 - 不工作答案

【问题标题】：jquery select2 - not workingjquery select2 - 不工作
【发布时间】：2013-04-17 21:24:17
【问题描述】：

我正在使用 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" />

我想找个线索，我对这个插件很陌生，花了一天时间看例子。

【问题讨论】：

查看你的控制台查看 js 错误
控制台没有错误。
它对我有用....你包含 jquery 库

标签： jquery ajax jquery-select2

【解决方案1】：

如果附加到标准select 表单控件，select2 将不会执行 AJAX。它必须附加到隐藏的 input 控件才能通过 AJAX 加载。

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

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

在他们的examples section函数中也可以看到。

【讨论】：

网站上根本没有记录。它甚至没有给出 html 的示例。
有没有办法使用另一种方法如 $.get 来填充选择控件的选项？我不敢相信他们跳过了如此重要的信息，甚至在 ajax 上（这对于初学者来说非常困难）
这个答案是正确的。你需要使用另一个组件（例如
，等）来制作select2 ajax，除了
欲了解更多信息，请参阅此链接-itfrustration.in/jquery-select2-ajax

【解决方案2】：

我猜 user2315153 想要接收多个远程值，并错误地将带有 ajax 调用的 select2() 分配给 select> 元素。

获取远程值的正确方法是使用普通的 input> 元素，如果需要多个值，请在方法调用时通知“多个”参数。示例：

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

select> 元素不能用于远程值

更新：从 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>

【讨论】：

【解决方案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>

【讨论】：

您好，谢谢您的回答。但是，它不起作用 - 它说：错误：当附加到
路径没问题 - 我正在使用：bootstrap.css、prettify.css、select2.css、json2.js、jquery-1.7.1.min.js、jquery-ui-1.8。 20.custom.min.js,jquery.mousewheel.js prettify.min.js,bootstrap.min.js, select2.min.js
@user2315153 不，你没有。您尝试编辑此帖子。

【解决方案4】：

我认为没有必要使用隐藏的输入元素。您可以尝试一下，从 ajax 调用中获取纯 html 数据并将其设置进去，然后初始化 select2 重置方法。这是代码sn-p

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>

【讨论】：

【解决方案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')">

【讨论】：

【解决方案6】：

在我的例子中，旧版本的 select2 库导致了这个问题，请确保在网页中包含最新版本的 js 和 css。

【讨论】：