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 asacap1000
      Galera me ajudem por favor, estou pirando kkkkk
       
      Seguinte, tenho um form que realiza o submit via javascrit enviando os dados para uma página php formatada em json.
      Está gravando perfeitamente porém preciso dos dados do retorno, como Link do boleto, e alguns outros resultados para inserir no banco nesse ponto já pesquisei um monte testei de tudo até a página bugar e nada kkkk
       
      o Script que utilizo para o envio é esse:
       
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#frmBoleto").submit(function(){ $.ajax({ type: "POST", url: "https://www.sitedaloja.com.br/action/boleto_bradesco/gerando_boleto.php", data: $(this).serializeArray(), }).done(function( msg ) { }); return false; }); </script> Como fazer para capturar os dados  da resposta do json?  
    • By Sapinn
      Salve salve! Nuca intendi como isso realmente funciona por isso gostaria da ajuda de vcs. Estou desenvolvendo um sistema de historias e acho que seria interessante no envio dessas historia além dos texto imagem ilustrativas, mais ou menos como blogs de noticias fazem, mas como posso enviar texto e imagem e depois retorna-los juntos? Eu sei com enviar imagens em php mas gostaria de enviar a imagem e o texto colocando ambos em um textarea acho que assim ficaria bem mais interessante alguém pode me ajuda?
       
    • By manoaj
      Boa noite pessoal!
      Alguém ai entente dos checkouts do Mercado Pago pra me explicar como eu obtenho os dados da preferência criada através da url disponível na API
      https://api.mercadopago.com/checkout/preferences/:id?access_token=ACCESS_TOKEN_ENV  
    • By clickanapolis
      Boa tarde pessoal, desculpa se postei em lugar errado, mais não sei aonde postar essa minha dúvida. Estou finalizando um projeto que consiste em uma plataforma de processo seletivo e na etapa final os candidatos iram fazer uma prova online.
       
      O cliente me perguntou se é possível bloquear o navegador, tipo se ele sair do navegador ou mudar de aba tipo o sistema finalizar a prova do candidato, visto que o sistema irá identificar que ele foi fazer uma pesquisa.
       
      Eu particularmente não vi nada igual ate hj e não sei se existe algo seja em javascript ou qualquer outro modo de fazer isso.
×

Important Information

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