Jump to content
sronze

Ao digitar ID/Nome preencher múltiplos campos ou inputs com dados do XML em JavaScript

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By FabianoSouza
      Tenho uma situação em que preciso colorir o texto dentro de um elemento.
      Caso seu valor seja 0, pinte de uma cor, caso seja maior do que 0 (zero) pinte de outra cor.
       
      Como faço isso com CSS puro.
      Estou pesquisando e tem a possibilidade de criar condições no CSS....alguém ajuda?
       
      Valew!
    • By Rafaelmcd
      Pessoal, eu tenho uma DIV, que por padrão ela vem com este css: 
      <div class="clickoff" style="pointer-events: none;">
      ......
      </div>
      Porém queria que, caso um determinado cookie exista, o style dessa div seja alterado para pointer-events: auto;
      Alguém teria uma dica de como poderia fazer isso? Se possível com PHP. 
       
    • By Good
      Boa noite,
      gostaria de saber como vocês fariam um sistema de delivery.
       
      Pensei em 3 soluções:
      1. Cadastrar as faixas de CEP que haverá sistema de entregas;
      2. Criar uma área delimitadora no google e exportar em KML para fazer a validação se o endereço do cliente está dentro do raio;
      3. Criar um raio de entregacom ponto fixo do estabelecimento, por exemplo, o estabelecimento só vai poder atender em um raio de até 10km.
       
      Qual método o ifood e outros gigantes trabalham? Existe algum código pronto para que eu possa dar uma olhada?
       
      Aguardo um contato, obrigado!
    • By ZeroEnd
      Boa tarde.

      Nao tenho muito conhecimento em javascript mas estou aprendendo aos poucos.

      Minha dúvida é sobre Xpath, bom na verdade eu entendi de forma básica como fazer uma busca usando Xpath, tanto é que para isso eu estava usando o programa Xpath Visualizer para entender.
      Mas eu não achei como empregar isso em uma página html, usando as mesmas variáveis que uso no programa para ter o mesmo resultado.
      Gostaria de saber se em algum lugar a informações de forma simples ou algo para tomar uma direção.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.