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

Question

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 fir

Answer 1

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.

Answer 2

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();
});