Fatal编程技术网
  • jquery/
  • jquery select2-不工作

jquery select2-不工作

jquery ajax

jquery select2-不工作,jquery,ajax,jquery-select2,Jquery,Ajax,Jquery Select2,我正在使用select2 pluginivaynberg.github.io/select2。我正在尝试显示下拉选择。它将data.php中的所有项目作为选项获取。但是，select2是一个自动完成插件，应该在客户端输入中搜索搜索词，并且只显示匹配的结果。目前，它正在显示所有的项目，而没有得到搜索结果。对不起我的语言 data.php回应了这一点： [{ "id": "1", "text": "item1", "exercise": "blah text" }, {

我正在使用select2 pluginivaynberg.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" />
我想找到一个线索，我对这个插件很陌生，已经花了一天的时间查看示例。

我尝试了代码，效果很好。我认为您没有包括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>
如果附加到标准的select表单控件，select2将不会执行AJAX。它必须附加到隐藏的输入控件，才能通过AJAX加载

更新：这已在Select2 4.0中修复。发件人：

与所有数据适配器的标准元素保持一致，消除了对隐藏元素的需要

它也可以在它们的函数中看到。

我认为没有必要使用隐藏的输入元素。您可以试一试，从ajax调用中获取纯html数据，然后将其设置为init select2重置方法。下面是代码片段

HTML

Ajax响应：

我猜user2315153希望接收多个远程值，并错误地将select2和ajax调用分配给元素

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

<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
<script>
$('#thisid').select2({
        minimumInputLength: 2,
        multiple: true,
        ajax: {
              ...
该元素不能用于远程值

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

这意味着：使用SELECT标记，而不是使用attrib 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>
经过大量阅读，我决定更改select2.js本身

在第2109行，将其更改为

this.focusser.attr("id", "s2id_"+this.select.context.id);
如果您的输入标记是如此

<select id="fichier">
因此，这将像您使用

<select id="fichier" onkeyup="console.log('Be Practical')">
在我的例子中，select2库的旧版本导致了问题，请确保您在网页中包含最新版本的js和css。

请参阅您的控制台了解js错误控制台上没有错误。这对我来说很好…r u包括jquery library Hi，感谢您的回答。但是，它不起作用-它说：错误：Select2在附加到元素时不允许使用“ajax”选项。路径完全正确-我正在使用：bootstrap.css、prettify.css、Select2.css、json2.js、jquery-1.7.1.min.js、jquery-ui-1.8.20.custom.min.js、jquery.mouseweewheel.js prettify.min.js、bootstrap.min.js、Select2.min。js@user2315153不，你没有。你试图编辑这篇文章，但网站上根本没有记录。它甚至没有给出一个html的例子。有没有一种方法可以使用另一种方法，例如$.get来填充select控件的选项？我不敢相信他们跳过了如此重要的一条信息，而且即使在ajax上，这也是第一次非常困难。这个答案是正确的。您需要使用另一个组件例如等来使select2成为ajax，但不需要隐藏输入，因为select2将为您隐藏它。有关更多信息，请参阅此链接- 
this.focusser.attr("id", "s2id_"+this.select.context.id);

<select id="fichier">

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

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