Tecnologia

Autocomplete

Autocomplete é um widget Jquery que fornece sugestões enquanto você digita em um campo.


Exemplo:

Comece digitando a letra 'a':



HTML - inclusão do JQuery:


<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	
<form>
	<input type="tex" name="nome" id="nome" size="40">
<form>

Javascript:

	
var items = ["anderson", "bravo", "santos"];

$(document).ready(function() {
	$( "#nome" ).autocomplete({
		
		// source é o local onde iremos fazer a busca das palavras para autocompletar
		// Pode ser de 2 tipos:
		
		// Página:
		source: "pagina_de_busca.php",
		
		// OU em um Array
		source: items,
		
		minLength: 3, // minimo de letras para o autocomplete entrar em ação
		
		select: function( event, ui ) {
			// ação a ser executada ao selecionar um item
			document.getElementById("nome").value = ui.item.value;
		}
	});
}); 

Se usarmos uma página, podemos passar mais de um parâmetro para ela:

		
$(document).ready(function() {
	$( "#nome_do_input" ).autocomplete({
		source: function(request, response) {
			$.getJSON("search.php", { term: request.term, user: $('#user').val(), response);
			// Onde: 'term' é o termo digitado, e 'user' é o valor que esta no input de id = 'user', por exemplo
			// Podemos passar quantos parâmetros a mais quisermos
		},					
		minLength: 3,
		select: function( event, ui ) { 
			document.getElementById("nome_do_input").value = ui.item.value;
		}
	});
});

Ainda utilizando uma página para pesquisa, o resultado deverá ser no formato json:

		
try {
	$db = new PDO( "sqlite:C:\bancoDeDados\banco.db" );
} catch (PDOException $e) {
	$errorCode = ERR_NO_DATABASE;
}

// $_REQUEST['term'] é passado pelo JQuery
$stm = $db->prepare("SELECT DISTINCT(nome) FROM pessoa WHERE nome LIKE '%". $_REQUEST['term'] ."%';");
if($stm && $stm->execute())
	$talk = $stm->fetchAll(PDO::FETCH_ASSOC);
   
$json = '[';
foreach($talk as $t) {
	if ($json != '[')
		$json .=  ',';   
	$json .= '{"value":"'.utf8_encode($t['peer']).'"}';
}
$json .= ']';
 
echo $json;

Fonte: http://jqueryui.com/autocomplete/

2020 © B85 Tecnologia
eu@andersonbravo.com.br