Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rodrigo antonio cruz

Autocomplete para vários inputs

Por , em Javascript

Recommended Posts

rodrigo antonio cruz    0

rodrigo antonio cruz
Postado
Olá amigos do Imasters, venho com está duvida que não consegui resolver sozinho, tenho este autocomplete que segue abaixo, queria fazer com que vários inputs utilizassem o mesmo autocomplete! Não se trata de alimentar todos os inputs de uma unica vez, não é isso, quero usar o mesmo código para alimentar cada input quando for usado, por exemplo agora irei preencher o input prescrição 1 aí o autocomplete me da as opções, e assim sucessivamente, desde já mto obrigado e desculpe minha ignorância!







<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<link rel="stylesheet" href="/resources/demos/style.css">



<script type="text/javascript">

$.noConflict();

jQuery(document).ready(function($) {

$( function() {


var availableTags = [



"Tratamento endo",

"Uniradicular",

"Birradicular",

"Monoradicular",

"Retratamento ",

"Uniradicular",

"Birradicular",

"Monoradicular"


];

$( "#prescricao" ).autocomplete({

source: availableTags


});

} );


});

</script>


<input type="text" id="prescricao" >


<input type="text" id="prescricao1" >


<input type="text" id="prescricao2" >

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

ué utiliza o seletor de classes:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//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>
  
  <script type="text/javascript">
  $(document).ready(function() {
	  
		var autoCompletarTexts = [
			 "Tratamento endo"
			,"Uniradicular"
			,"Birradicular"
			,"Monoradicular"
			,"Retratamento"
			,"Uniradicular"
			,"Birradicular"
			,"Monoradicular"
		];
		
		$( ".autoComplete" ).autocomplete({
		  source: autoCompletarTexts
		}); 	
  });  
  </script>
</head>
<body>
 
<form action="recebe.php" method="post">
	<div class="ui-widget">
		<label>
			Exame 1 - <input type="text" name="prescricao[]" class="autoComplete" /><br />
		</label>
		<label>
		Exame 2 - <input type="text" name="prescricao[]" class="autoComplete" /><br />
		</label>
		<label>
		Exame 3 - <input type="text" name="prescricao[]" class="autoComplete" /><br />
		</label>
		<label>
		Exame 4 - <input type="text" name="prescricao[]" class="autoComplete" /><br />
		</label>
	  
	  <br />
	  <input type="submit" value="Enviar" />
	</div>
</form>
 
 
</body>
</html>

Obs:

repare bem que utilize a classe (para muitos elementos) já que o uso de id é para quando se tem um e apenas um elemento na pagina.

Já no atributo 'name' o uso do colchetes (brackets) foi de proposito

name="prescricao[]"

Utilizei um conceito de vetor, ai por exemplo no php (ou server) você recebe um array algo assim:

Array
(
    [prescricao] => Array
        (
            [0] => Tratamento endo
            [1] => Uniradicular
            [2] => Retratamento
            [3] => Monoradicular
        )

)

Recomendo a leitura:

http://www.w3schools.com/jquery/jquery_ref_selectors.asp

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Talvez um select2 fica melhor ai hehe:

https://select2.github.io/examples.html

Ps: editei o código com os label de forma 'correta' + form

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito