jQuery:如何循环通过大数据量xml数组

时间:2019-02-06 13:23:08

标签: jquery xml large-data

我有一个XML文件,其中包含54000个地址行,并且我想输入自动完成内容以在jQuery的帮助下搜索地址。我的jQuery代码无法正常工作,因为它的数据量很大,并且需要很长时间才能显示结果。

如何改善循环搜索速度?

XML文件:

`<?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>`

我想输入一些字母,并向我显示包含这些字母的xml文件中的所有结果。

0 个答案:

没有答案