jQuery autocomplete frozen for initial few alphabets

Question

Below is the snippet which add an autocomplete suggestion to html input box holding the name of cities for a particular delivery purpose:

getAllActiveCitiesList: function(){
    js_script.script.cities_polling_count += 1;
    js_script.script.ajax_loading_message = "Fetching all active and approved citiess....give us a minute!"
    if(js_script.script.all_active_approved_citiess == null && js_script.script.cities_polling_count < 12){
        $.ajax({
            type: "GET",
            url: "some/url/to/fetch/data",
            success: function(data){
                js_script.script.cities_polling_count = 0;
                if(data.length > 0){
                    js_script.script.all_active_approved_citiess =  data;
                    for(index in data){
                        cities_data = data[index]
                        js_script.script.cities_to_id_map[cities_data["name"] +" ( "+cities_data["citiesId"]+" )"] = cities_data["id"];
                    }
                    // setup autocomplete
                    $("#mss_cities_id").autocomplete({
                       source: Object.keys(js_script.script.cities_to_id_map)
                    });
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                js_script.script.flashPageBanner("<strong>Warning:</strong> Something went wrong with backend, auto-suggest for Citiess might not work ");
            }
        });
    }else if(js_script.script.cities_polling_count % 12 == 0){
        js_script.script.flashPageBanner("Something is wrong, auto-suggest for Citiess might not work ");
    }
}

Markup where this is assigned

<div class="form-group col-lg-4 no-padding-left">
    <div class="input-group input-group-lg col-lg-12">
        <input type="text" class="form-control text-uppercase" id="mss_cities_id" placeholder="Cities ID">
        <span class="input-group-btn">
            <button class="btn btn-default refresh-cities-id custom-hover-tooltip" title="Refresh Citiess List - Use ONLY if something is wrong!!">
                <i class="glyphicon glyphicon-refresh"></i>
            </button>
        </span>
    </div>
</div>

Ajax response send a city data which contains both city names as well as city codes.

So far so good, ajax sets around 5000 values in autocomplete. My problem is that if we type slowly one or two alphabets the whole page is stucked in frozen mode and chrome sometimes would suggest to kill the page.

If we type quickly, generally no issue comes. My end users are people with slow typing skills and this feature is becoming more of a problem for them than solution.

One solution that comes to my mind is to stop the autocomplete lookup until, say, 4 characters are typed but this might fail the purpose as some of the cities (city codes) might have just 2 alphabets. Please suggest how can this problem be solved?

jquery version is 1.12.4