Você vai ter que usar um AJAX para buscar o objeto dentro do JSON onde a chave CÓDIGO OACI
seja igual ao valor digitado no input.
Para isso, crie um arquivo com a extensão .json
(exemplo: dados.json
) e insira nele todo o código do Pastebin que você informou.
Declare uma variável com escopo mais amplo que irá receber o JSON do AJAX (usei a variável var json;
). Essa variável irá servir para armazenar o retorno do AJAX apenas 1 vez, ou seja, uma vez que essa variável receba o JSON, o AJAX não será mais disparado, evitando múltiplas requisições ao alterar o valor do input, pois todo o JSON já está na memória na variável json
.
Depois você usa uma função (chamei de busca()
) onde irá verificar, usando .filter()
, se existe um objeto no JSON com chave CÓDIGO OACI
igual ao código que foi digitado e mostrar o resultado no span
.
Em vez de usar o atributo oninput
para chamar a função MyFunction()
, usei um event listener, porque assim você restringir o escopo dos objetos dentro da função do DOMContentLoaded
.
Veja como fica o código:
HTML:
<p>Localidade
<input type="text" id="localidade">
<span id="ca"></span>
</p>
JS:
document.addEventListener("DOMContentLoaded", function(){
var json;
document.getElementById("localidade").oninput = function(){
var x = this.value;
var z = x.length;
if(z == 4 && json){
busca(x);
}else if(z == 4){
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
json = JSON.parse(this.responseText);
busca(x);
}
}
ajax.open("GET", "dados.json", true);
ajax.send();
}
}
function busca(cod){
var res = json.filter(function(obj){
return obj['CÓDIGO OACI'] == cod;
});
if(res.length){
document.getElementById("ca").innerHTML = "Aeródromo: " + res[0].NOME;
}else{
document.getElementById("ca").innerHTML = "Aeródromo Inexistente: " + cod;
}
}
});