首页 文章

jquery select2 - 不工作

提问于
浏览
19

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

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

5 回答

  • 9

    select2 will not do AJAX if attached to a standard select form control. It MUST be attached to a hidden input control to load via AJAX.

    Update :已在Select2 4.0中修复此问题 . 来自Pre-Release notes

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

    它的功能也可以在examples section中看到 .

  • 1

    我想user2315153想要接收多个远程值,并错误地将select2()与ajax调用分配给<select>元素 .

    获取远程值的正确方法是使用普通的<input>元素,如果需要多个值,请在方法调用时通知"multiple"参数 . 例:

    <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>
    
  • 30

    我尝试了代码,效果很好 . 我认为你不包括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>
    
  • 5

    我认为不需要使用隐藏的输入元素 . 你可以尝试一下,从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>
    
  • 0

    经过多次阅读,我决定改变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')">
    

相关问题