Jquery输入关键字下拉菜单提示自动完成特效

使用方法

  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", "country.xml", true);
    xhttp.send();
  });

  function myFunction(xml , key) {
      var x, i, xmlDoc , key;
      xmlDoc = xml.responseXML;
      x = xmlDoc.getElementsByTagName("country");
      var counter = 0;
      for (i = 0; i < x.length; i++) {
          var value = x[i].childNodes[0].nodeValue.trim();
          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
    });
  });