Ola estou com um problema em JavaScript
O objetivo e digitar um ID/Nome em um input e ele buscar em um arquivo XML fazendo autocomplete e preencher outros dois inputs com os atributos associado ao ID/Nome da base XML.
GIF de exemplo, obs(exatamente oque pretendo fazer): http://blog-media.chromaticsites.com.s3.amazonaws.com/google-places-autocomplete-3/autocomplete-error.gif
Link do XML: https://www.w3schools.com/js/cd_catalog.xm
Segue meu código:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
Nome:<input id="idInput">
UF:<input id="idInput02">
Ano:<input id="idInput03">
<script>
var ValorXML1 = [];
$(document).on('keyup' , '#idInput' ,function(){
var keyvalue = $("#idInput").val();
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
ValorXML1 = [];
CaregarXML(this , keyvalue);
}
};
xhttp.open("GET", "https://www.w3schools.com/js/cd_catalog.xml", true);
xhttp.send();
});
function CaregarXML(xml , key) {
var x, i, xmlDoc , key;
xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("TITLE");
var cont = 0;
for (i = 0; i < x.length; i++) {
var valor = x[i].childNodes[0].nodeValue.trim();
var pattern = valor.substring(0 , key.length);
if(key.toUpperCase() == pattern.toUpperCase() && cont < 5){
ValorXML1.push(valor);
cont++;
}
}
$("#idInput").autocomplete({
source: ValorXML1
});
}
$( function() {
$( "#idInput" ).autocomplete({
source:ValorXML1
});
});
</script>