Jquery: How to loop through large data volume xml array

Question

I have an XML file, with 54000 address lines and I want to make an autocomplete input to search an address with help of jQuery. My jQuery code does not work fine because it is a large data volume and it takes a lot of time to show me results.

How can I improve my loop to search faster?

XML file:

`<?xml version="1.0" encoding="UTF-8"?>
<ArrayOfZCR xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<!-- <ZCR County="Bucuresti" City="Bucuresti Sector 1" Street="Academiei nr. 7" ZipCode="010011"/> -->
<ZCR County="Bucuresti" City="Bucuresti Sector 1" Street="Academiei nr. 9-29" ZipCode="010012"/>
<ZCR County="Bucuresti" City="Bucuresti Sector 1" Street="Academiei nr. 31-T" ZipCode="010013"/>
<ZCR County="Bucuresti" City="Bucuresti Sector 1" Street="Academiei nr. 14-20" ZipCode="010014"/>
<ZCR County="Bucuresti" City="Bucuresti Sector 1" Street="Academiei nr. 22-26" ZipCode="010015"/>
<ZCR County="Bucuresti" City="Bucuresti Sector 1" Street="Academiei nr. 28-T" ZipCode="010016"/>
...
</ArrayOfZCR>`

jQuery:

`<script>
var countryResult = [];
$(document).on('keyup' , '#search-keyword'  ,function(){
var keyvalue = $("#search-keyword").val();

var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        countryResult = [];
        myFunction(this , keyvalue);
    }
};
xhttp.open("GET", "cities_ro.xml", true);
xhttp.send();
});

function myFunction(xml , key) {
  var x, i, xmlDoc , key;
  xmlDoc = xml.responseXML;
  //x = xmlDoc.getElementsByTagName("county");
  $.get('cities_ro.xml', function(d){
      $(d).find('ZCR').each(function(){
          var $entry = $(this);
          var x = $entry.attr('County');
          var city = $entry.attr('City');
          var street = $entry.attr('Street');
          var zipCode = $entry.attr('ZipCode');
          //console.log(x + ", " + city + ", " + street + ", " + zipCode);
  var counter = 0;
  for (i = 0; i < 55000; i++) {
      var value = x + ", " + city + ", " + street + ", " + zipCode;
      var pattern = value.substring(0 , key.length);
         if(key.toUpperCase() == pattern.toUpperCase() && counter < 10){
           countryResult.push(value);
           counter++;
         }
  }
   $("#search-keyword").autocomplete({
        source: countryResult
      });
})
  });
}


$( function() {
$( "#search-keyword" ).autocomplete({
  source:countryResult
 });
});
</script>`

HTML:

`<div id="frmAutoComplete">
    <div class="ui-widget">
        <label for="search-keyword">Address: </label> <input
            id="search-keyword">
    </div>
</div>`

I want to enter some letters and show me all results from my xml file containing that letters.