jQuery UI Autocomplete com ColdFusion e Ajax

On 9 de outubro de 2014, in CFML, JavaScript, jQuery, by andersonstraube

Neste post veremos como utilizar o Autocomplete do jQuery UI com um componente ColdFusion utilizando ajax.

A ideia principal é buscar uma pessoa pelo termo informado no campo, com o retorno do ajax podemos popular o campo e exibir abaixo o ID e o nome da pessoa. Utilizaremos o JSON como formato dos dados.


//pagina.cfm


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
$(document).ready(function()
{
	$("#nome").autocomplete({
		minLength: 2,
		delay: 400,
		source: function( request, response ) {
			$.ajax({
				url: "service.cfc?returnformat=JSON&amp;amp;amp;amp;queryformat=column&amp;amp;amp;amp;method=getNomes",
				dataType: "json",
				type: "POST",
				data: {
					nome: request.term
				},
				success: function( data ) {
					/* Utilizamos o map pois nosso array deve contar "value" e "label", no caso está retornando "id" e "nome" */					
					var jsonNomes = $.map( data.DATA.id, function( item, i ) {
						return {
							value: data.DATA.id[i],
							label: data.DATA.nome[i] 
						}
					});
					response( jsonNomes );
				}
			});
		},
		/* se não colocarmos o focus ao percorrer a lista pelo teclado exibe o ID da pessoa e não o nome dela */
		focus: function( event, ui ) {
			$(this).val( ui.item.label );
			return false;
		},
		select: function( event, ui ) {
			$(this).val( ui.item.label );
			$("p").html( 'ID: '+ ui.item.value +' <br>Nome: ' + ui.item.label );
			return false;
		}
	})
});
</script>
</head>
<body>

	<label for="nome">Nome do cliente</label>
	<input id="nome" name="nome" type="text">
	<br /><hr>
	<p></p>
	    
</body>
</html>

No código do autocomplete temos o parâmetro minLength: 2 onde indicamos que a busca será realizada somente após o usuário informar pelo menos 2 caracteres.

Costumo utilizar também o delay: 400 para evitar que o cliente digite algo rápido e fique requisitando informações ao servidor.

Agora vamos criar o backend, componente responsável por retornar a lista de pessoas.

//service.cfc


<cfcomponent displayname="service">

	<cffunction name="getNomes" access="remote" returntype="query" returnFormat="json">
		<cfargument name="nome" type="string" required="true"/>

		<cfset var q_Names = QueryNew("id,nome", "Integer,String") />
	
		<!---  Quando usar banco de dados pode utilizar o sql abaixo como exemplo
		<cfquery name="q_Names" datasource="#application.dsn#">
			SELECT 
				id, nome
			FROM 
				pesssoas
			WHERE			
        		nome LIKE <cfqueryparam value="%#arguments.nome#%" cfsqltype="cf_sql_varchar" maxlength="70" />					
		</cfquery>
		--->
		
		<cfset QueryAddRow(q_Names, 5) />

		<cfset QuerySetCell(q_Names, "id", 1, 1) />
		<cfset QuerySetCell(q_Names, "nome", "Anderson Straube", 1) />

		<cfset QuerySetCell(q_Names, "id", 2, 2) />
		<cfset QuerySetCell(q_Names, "nome", "Joaquina Silva", 2) />
	
		<cfset QuerySetCell(q_Names, "id", 3, 3) />
		<cfset QuerySetCell(q_Names, "nome", "Maria Vitoria", 3) />
	
		<cfset QuerySetCell(q_Names, "id", 4, 4) />
		<cfset QuerySetCell(q_Names, "nome", "Maria da Graca", 4) />
	
		<cfset QuerySetCell(q_Names, "id", 5, 5) />
		<cfset QuerySetCell(q_Names, "nome", "Maria dos Santos", 5) />

		<cfreturn q_Names />
	</cffunction>

</cfcomponent>

Até a próxima, abraço.

Tagged with:  

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *