set json data from ajax and make it serarchable in select2 jQuery

问题

I had two drop down input fields, both are implementing Select2 Jquery. Here i set the data as static for first drop down . its works fine . As per selection of value in first drop down, next drop down will filled by another set of json data by ajax. I need to second drop down should be searchable with only once loaded the ajax data. but i am not get correctly. i not able to make it workable.

i used the following scripts

function format(item) { return item.name; }
        var data=[{"id":"1995","name":"Banahatti"},{"id":"5074","name":"Kolhapur(Maharashtra)"},{"id":"2356","name":"Sangola"},{"id":"906","name":"Shahada"}];    
$("#txtSource").select2({
                data:function() { return { text:'name', results: data }; },
                formatSelection: format,
                formatResult: format
            });

for second drop down loaded like following

        var theID,desdata;
        $("#txtSource").on('change',function(){
           theID = $("#txtSource").select2('data').id;
           desdata= $.getJSON('api/destination.php',{source:theID});
            //console.log(desdata);
            });

        $("#txtDestination").select2({
            data:function() { return { text:'name', results:desdata  }; },
            formatSelection: format,
            formatResult: format
         });

回答1:

i just had a similar situation. my goal was to chain a select2 off of the change event of a normal select. the challenge was how to pass a dynamic value into the url.

the select2 docs say that $opts.ajax.url can be a function. However when i dropped a console.log into this function i realized that it was only called during initialization.

Here's my solution - it destroys and recreates the select2 each time the other select changes.

$opts = {
    placeholder: "Category ...",
    minimumInputLength: 0,
    dropdownAutoWidth: true,
    ajax: {
        url: getcategoryajaxurl(),
        dataType: 'jsonp',
        quietMillis: 100,
        data: function (term, page) { // page is the one-based page number tracked by Select2
            return {
                q: term, //search term
                page_limit: 10, // page size
                page: page, // page number
            };
        },
        results: function (data, page) {
            var more = data.total > 10; // return 11 when 10 asked for to show more available whether or not there are more results available

            // notice we return the value of more so Select2 knows if more results can be loaded
            return {results: data.results, more: more};
        }
    },
    id: function(e) { return e.id; },
    escapeMarkup: function(m) { return m; },
    initSelection : function (element, callback) {
        var data = {id: element.val(), text: element.val()};
        callback(data);
    },
    //Allow manually entered text in drop down.
    createSearchChoice: function(term, data) {
        if ( $(data).filter( function() {
            return this.text.localeCompare(term) === 0;
        }).length === 0) {
            return {id:term, text:term};
        }
    },
};    

function getcategoryajaxurl() {
    return "/ajax/categories.typeahead.php?doctypeid=" + $("#doctypeid").val();
}

function setupcategoriesselect2() {
    $opts = select2textOpts("Category ...", 'categories', true, "?doctypeid=33");
    $opts.ajax.url = getcategoryajaxurl();
    $opts.createSearchChoice = null;
    $("#categoryid").select2( $opts );
}
$(document).ready(function () {
    $('#doctypeid').change( function(e) {
        $('#categoryid').select2("destroy");
        setupcategoriesselect2();
    });

    setupcategoriesselect2();
});

回答2:

You have to change the data() function. It should try to find already downloaded or hardcoded data in a variable (should be an Object like {obj.firstSelectKey: {results: data[]}) created to store select2 results. If there is no data under a specific key, an ajax request should be done.

Also there is cache parameter for jQuery ajax/select2 ajax requests, but it is handled by browser so not you decide if ajax data should be stored but the browser does. There is no control on browser xhr cache.

来源：https://stackoverflow.com/questions/22898693/set-json-data-from-ajax-and-make-it-serarchable-in-select2-jquery