javascript - 使用 Select2 Ajax 填充选择选项

标签 javascript ajax json jquery-select2

我正在使用 Select2 Ajax 在我的 html 选择上应用自动完成

这是 select2 代码:

        <script>
            $(function(){
            $(".marques-multi").select2({
                minimumInputLength: 3,
                tags: [],
                ajax: {
                    url: "user/marques",
                    dataType: 'json',
                    type: "GET",
                    quietMillis: 50,
                    data: function (term) {
                        return term;
                    },
                      processResults: function (data) {
                        return {
                          results: data
                        };
                    },
                    transport: function (params, success, failure) {
                        var $request = $.ajax(params);

                        $request.then(success);
                        $request.fail(failure);

                        return $request;
                  }
                }
            });
        });
    </script>

这是我的 html :

    <select class="form-control input-sm marques-multi" name="marque"></select>

这就是 URL:“user/marques”和数据 (www.mywebsite.com/user/marques/marques?term=nike) 返回的内容:

[
{"id_marque":"50670","marque_name":"NIK HUBER GUITARS"},{"id_marque":"50671","marque_name":"NIKALAS CATLOW"},{"id_marque":"1","marque_name":"NIKE"},{"id_marque":"50672","marque_name":"NIKE"},
{"id_marque":"50673","marque_name":"NIKE"},{"id_marque":"50674","marque_name":"NIKE 6.0"},{"id_marque":"50675","marque_name":"NIKE ACCESSORIES"},{"id_marque":"50676","marque_name":"NIKE ACG"},{"id_marque":"50677","marque_name":"NIKE ACTION SPORTS"},{"id_marque":"50678","marque_name":"NIKE AIR MAX"},{"id_marque":"50679","marque_name":"NIKE BAIN"}
]

当我在选择输入中编写示例 nik 时,我在控制台中看到请求返回此 json,没有错误,但选择没有填充此数据,它保持空白。

最佳答案

如果可能,请将 JSON 上的数据属性从 id_marquemarque_name 更改为 idtext

所以来自:

[
{"id_marque":"50670","marque_name":"NIK HUBER GUITARS"},{"id_marque":"50671","marque_name":"NIKALAS CATLOW"},{"id_marque":"1","marque_name":"NIKE"},{"id_marque":"50672","marque_name":"NIKE"},
{"id_marque":"50673","marque_name":"NIKE"},{"id_marque":"50674","marque_name":"NIKE 6.0"},{"id_marque":"50675","marque_name":"NIKE ACCESSORIES"},{"id_marque":"50676","marque_name":"NIKE ACG"},{"id_marque":"50677","marque_name":"NIKE ACTION SPORTS"},{"id_marque":"50678","marque_name":"NIKE AIR MAX"},{"id_marque":"50679","marque_name":"NIKE BAIN"}
]

致:

[{"id":"50670","text":"NIK HUBER GUITARS"},{"id":"50671","text":"NIKALAS CATLOW"},{"id":"1","text":"NIKE"},{"id":"50672","text":"NIKE"},
    {"id":"50673","text":"NIKE"},{"id":"50674","text":"NIKE 6.0"},{"id":"50675","text":"NIKE ACCESSORIES"},{"id":"50676","text":"NIKE ACG"},{"id":"50677","text":"NIKE ACTION SPORTS"},{"id":"50678","text":"NIKE AIR MAX"},{"id":"50679","text":"NIKE BAIN"}];

Fiddle

关于javascript - 使用 Select2 Ajax 填充选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32393496/

相关文章:

json - 正则表达式可以减少巨大的文件大小?

javascript - 使用 AJAX 结果动态更新 Bootstrap Popover

javascript - 在 ember 中维护多个状态

javascript - 传递 JSON 对象时 View 中出现 Visual Studio "Conditiional compilation is turned off"错误

javascript - 在响应式 div 中居中 div 的最佳方式

javascript - ajax promise 数据未定义

javascript - 如何将 JS 单击事件附加到 AJAX 加载按钮?

c# - ASP.NET 5/MVC 6 Ajax 将模型发布到 Controller

php - 没有数据怎么选NULL,有数据就显示?

php - Javascript json 数组到 php 数组