Select2预加载来自AJAX循环的多个选择

I'm integrating a Google Map API that uses Geonames and Select2 to allow the user to enter the cities that he/she has visited.

我正在集成一个谷歌地图API，它使用Geonames和Select2允许用户进入他/她访问过的城市。

Currently, I am trying to find a way for the search area to show the selections the user made in a previous session upon reloading the page (e.g., if the user already entered Paris, France in a previous session, then Paris, France should be preloaded in the search area upon reloading). The selections are stored in a database, but at the moment I'm only able to put one of the previously selected cities in the search area by repassing it through Geonames (I need to pass through Geonames to pass the lat & long). I'd like to repass as many locations as the user entered in the previous session.

目前,我试图找到一种方法对搜索区域显示选择的用户在前一交易日重新加载页面的情况下(例如,如果用户已经进入巴黎,法国在前一交易日,巴黎,法国应该加载在搜索区域在重载)。这些选择存储在一个数据库中，但目前我只能通过通过Geonames(我需要通过Geonames才能通过lat & long)将先前选定的城市之一放到搜索区域中。我想把用户在上一个会话中输入的位置重新填满。

The code I am using for this is below - thanks for your help:

我使用的代码如下-感谢您的帮助:

 function locationFormatResult(location) { 
return location.name + ", " + location.adminName1 + ", " + location.countryName;
}//results format

function locationFormatSelection(location) {
    return location.name + ", " + location.adminName1 + ", " + location.countryName;
}//selection format


$(function () {
    $('#citiestext').select2({
        id: function(e) { return e.name + ',' + e.adminName1 + ',' + e.countryName + ',' + e.lat + ',' + e.lng},
        placeholder: 'Location',
        multiple: true,
        allowClear: true,
        width: '350px',
        height: '50px',
        overflow: 'auto',
        minimumInputLength: 2,
        ajax: { //this is the ajax call for when the user selects a city
            url: 'http://ws.geonames.org/searchJSON',
            dataType: 'jsonp',
            data: function (term) {
                return {
                    featureClass: "P",
                    style: "medium",
                    isNameRequired: "true",
                    q: term
                };
            },
            results: function (data) {
                return {
                    results: data.geonames
                };
            }
        },
        initSelection : function(element, callback){
        for (var i=11;i<13;i++){
            $.ajax("http://ws.geonames.org/searchJSON",{//ajax for preloading
                dataType: 'jsonp',
                data:{
                maxRows:1,
                q: i}//for this example, I'm using the numbers 11 & 12 as my Geonames queries just to test the preloading functionality (both numbers do have corresponding locations in Geonames if run through a query)
            }).done(function(data){callback(data.geonames);}); //PROBLEM: currently is only returning the location for "12" - I need it to return locations for 11 and 12 in the select area        
        }},
        formatResult: locationFormatResult,
        formatSelection: locationFormatSelection,
        dropdownCssClass: "bigdrop",
        escapeMarkup: function (m) { return m; }
    });
});

jsfiddle: http://jsfiddle.net/YDJee/ (trying to get more than one entry in the select box)

jsfiddle: http://jsfiddle.net/YDJee/(尝试在选择框中获取多个条目)

2 个解决方案

#1

The point is that the callback needs to be called with the array of objects for multiple select2.

重点是，需要使用多个select2的对象数组来调用回调。

In this case, as you need to gather each json object from an ajax call, you need to use jQuery deferreds.

在这种情况下，当您需要从ajax调用中收集每个json对象时，您需要使用jQuery延迟。

Something like that:

这样的:

initSelection : function(element, callback){
        var result = new Array();
        var f = function(i) {
                     return $.ajax("http://ws.geonames.org/searchJSON",{
                            dataType: 'jsonp',
                            data:{
                              maxRows:1,
                              q: i
                            },
                            success: function(data) { result.push(data);}})
        };
        var def = [];
        for (var i=11;i<13;i++){
            def.push(f(i))
        }};
        $.when.apply($, def).done(function() {
            callback(result);
        });
}

#2

For those also using an id callback, and who find their issue is not an async problem, take a look at this (which remains a necessary fix as of this posting).

对于那些也使用id回调的人，以及发现他们的问题不是异步问题的人，请查看一下这个(这在本文中仍然是一个必要的修复)。

#1