首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何通过Ajax请求将Select2与JSON结合使用?

如何通过Ajax请求将Select2与JSON结合使用?
EN

Stack Overflow用户
提问于 2014-01-05 05:02:01
回答 6查看 219K关注 0票数 99

我的Select2 3.4.5不能处理JSON数据。

这是我在HTML上的输入框:

代码语言:javascript
复制
<input class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />

…还有我的JavaScript

代码语言:javascript
复制
$(".itemSearch").select2({
    placeholder: "Search for an Item",
    minimumInputLength: 2,
    ajax: {
        url: "/api/productSearch",
        dataType: 'json',
        quietMillis: 100,
        data: function (term, page) {
            return {
                option: term
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.total;
            return {
                results: data.itemName,
                more: more
            };
        }
    },
    formatResult: function (data, term) {
        return data;
    },
    formatSelection: function (data) {
        return data;
    },
    dropdownCssClass: "bigdrop",
    escapeMarkup: function (m) {
        return m;
    }
});

我用Laravel 4做了一个API,每当我在文本框中输入任何内容时,它都会返回值。

如果我在文本框中输入"test“,结果如下:

代码语言:javascript
复制
[{"itemName":"Test item no. 1","id":5},
{"itemName":"Test item no. 2","id":6},
{"itemName":"Test item no. 3","id":7},
{"itemName":"Test item no. 4","id":8},
{"itemName":"Test item no. 5","id":9},
{"itemName":"Test item no. 6","id":10},
{"itemName":"Test item no. 7","id":11}]

我无法将结果添加到我的Select2下拉列表中。我认为是formatSelectionformatResult导致了这个问题,因为我不知道应该给它设置什么参数。我不知道从哪里获取容器、对象和查询等参数以及它应该返回的值,或者我的JSON响应是错误的?

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2014-02-06 19:52:41

下面是一个示例

代码语言:javascript
复制
$("#profiles-thread").select2({
    minimumInputLength: 2,
    tags: [],
    ajax: {
        url: URL,
        dataType: 'json',
        type: "GET",
        quietMillis: 50,
        data: function (term) {
            return {
                term: term
            };
        },
        results: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.completeName,
                        slug: item.slug,
                        id: item.id
                    }
                })
            };
        }
    }
});

这相当简单

票数 116
EN

Stack Overflow用户

发布于 2016-05-07 06:29:55

在版本4.0.2中,只是在processResultsresult中略有不同:

代码语言:javascript
复制
    processResults: function (data) {
        return {
            results: $.map(data.items, function (item) {
                return {
                    text: item.tag_value,
                    id: item.tag_id
                }
            })
        };
    }

您必须在result中添加data.itemsitems是Json名称:

代码语言:javascript
复制
{
  "items": [
    {"id": 1,"name": "Tetris","full_name": "s9xie/hed"},
    {"id": 2,"name": "Tetrisf","full_name": "s9xie/hed"}
  ]
}
票数 20
EN

Stack Overflow用户

发布于 2017-05-18 04:12:02

这就是我如何解决我的问题,我正在获取数据变量中的数据,并通过使用上面的解决方案,我得到了错误could not load results。我不得不在processResults中以不同的方式解析结果。

代码语言:javascript
复制
searchBar.select2({
            ajax: {
                url: "/search/live/results/",
                dataType: 'json',
                headers : {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                delay: 250,
                type: 'GET',
                data: function (params) {
                    return {
                        q: params.term, // search term
                    };
                },
                processResults: function (data) {
                    var arr = []
                    $.each(data, function (index, value) {
                        arr.push({
                            id: index,
                            text: value
                        })
                    })
                    return {
                        results: arr
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup; },
            minimumInputLength: 1
        });
票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20926707

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档