i have litle problem with select2.

I want to do when the user selects a country to get all the regions for that country by country ID number. I achieved this without any problems. The problem is when I want to search already loaded regions. I type the name of the region in the input field and it sends the GET id request.

How to filter already loaded data without sending a new request to the database?

Here is code.

    var countries =  $('.js-country-select');
    var states = $('.js-state-select');
    var city = $('.js-city-select');


      // Init all countries

      countries.select2({
        ajax: {
            url: '/admin/drzave/',
            dataType: 'json',         
        }
    });

    // Select country and get states based on Country ID

    countries.on('select2:selecting', function() {

        // when is country selected than load states by id

        states.select2({
                ajax: {
                    url: '/admin/region/',
                    data: function() {
                        var query = {
                            country_id: countries.val(), // <-- selected country ID
                        }
                        return query;
                    },
                    dataType: 'json',  
                }
        });
    });

SQL: SELECT * FROM regions WHERE country_id = ID

Here is photo

On photo you can see, country request and region. Region all time send id and cant be filtered by region name.