DOWNLOAD

DEMO

ENGLISH

The Simple JQuery AutoComplete Plugin allows you to add autocomplete functionality easily in text fields on your site.

It also has resources to bring other data in the autocomplete list, as the id of the element, performing a callback function to store these data in other inputs.

You can also:
* Use multiple autocomplete on the same page
* Pass an extra parameter to filter the results of a sql query
* Stylize each autocomplete in different ways.

How to use it

To use the Simple AutoComplete JQuery Plugin is very easy. Just use the syntax:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="simpleautocomplete.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#input_fied_id").simpleAutoComplete("query_processor.php");
	});
</script>

Enter the css that will be used to style the auto complete:

<link rel="stylesheet" type="text/css" href="simpleAutoComplete.css" />

And the field that will run the autocomplete:

<input type="text" id="input_fied_id" name="estado" />

Optional Features:

Callback Function

You can use a callback function that will be performed by selecting an autocomplete item, bringing extra data.

To do it, use the syntax:

<script type="text/javascript">
	$(document).ready(function(){
		$("#input_fied_id").simpleAutoComplete("query_processor.php",null,callbackfunctionName);
	});

	// And create a callbackfunction
	function callbackfunctionName( par )
	{
		$("#id_estado").val( par[0] );
	}
</script>

The variable ‘par’ is a vector with additional data brought by the query for each item (stored in an attribute of the item).

The callback is useful for you to bring other data beyond what appears in the autocomplete, as the id of an autocomplete option, or any other data (see the demo that illustrates this feature) to be returned by the file that runs the query, and store it in the input “id_estado” (you can bring as many parameters as you want, and store them in different fields).

Optional parameters

You can use the optional parameters to add more detail and customize each autocomplete.

identifier : to enable the file (eg php) that will process the query to identify which query is processed, and to identify an autocomplete on a page that has more than one autocomplete.

autoCompleteClassName : if you want to use a custom css class name (default ‘autocomplete’). This is useful to avoid conflicts, or if you want to style each autocomplete differently.

selectedClassName : has the same purpose autoCompleteClassName, but applies for the pre-selected autocomplete item, eg, on mouse over (default ‘sel’).

attrCallBack : if you want to store the parameters that will be passed to the callback function in other list attribute (default ‘rel’).

extraParamFromInput : useful if you want to pass an additional parameter to the query, in order to filter the results. This value must be one input field (this way the value can be variable).

Compatibility

Simple AutoComplete version 1.1.0 has been tested, exhibiting the same behavior in the following browsers: IE6, IE7, IE8, Safari, Chrome and Firefox.

PORTUGUÊS

Hoje eu criei um novo sistema autocomplete, para substituir o antigo que estava tento bugs no IE. Este autocomplete é um plugin JQuery, fácil de integrar e customizar.

O Simple AutoComplete JQuery Plugin permite que você adicione a funcionalidade de autocomplete facilmente em campos de texto do seu site.

Ele também possui recursos para trazer outros dados na lista do autocomplete, como o id do elemento, executando uma função de callback para armazenar estes dados em outros inputs.

Você ainda pode:
* utilizar vários autocompletes numa mesma página
* passar um parâmetro extra para filtrar os resultados de uma consulta sql
* estilizar cada autocomplete de maneiras diferentes.

Como usar

Para usar o Simple AutoComplete JQuery Plugin é muito fácil. Basta usar a sintaxe:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="simpleautocomplete.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#input_fied_id").simpleAutoComplete("query_processor.php");
	});
</script>

Insira o css que será usado para estilizar o auto complete:

<link rel="stylesheet" type="text/css" href="simpleAutoComplete.css" />

E o campo que será executado o autocomplete:

<input type="text" id="input_fied_id" name="estado" />

Recursos opcionais:

Função de Callback

Você pode utilizar uma função de callback, que será executada ao selecionar um item do autocomplete, trazendo dados extras.

Para isso, utilize a sintaxe:

<script type="text/javascript">
	$(document).ready(function(){
		$("#input_fied_id").simpleAutoComplete("query_processor.php",null,callbackfunction);
	});

	// E crie a função de callback
	function callbackfunction( par )
	{
		$("#id_estado").val( par[0] );
	}
</script>

A variável ‘par’ é um vetor com dados adicionais trazidos pela consulta para cada item (armazenados em um atributo do item).

O callback é util para você trazer outros dados além do que aparecerá no autocomplete, como o id de uma opção do autocomplete, ou qualquer outro dado (veja o demo que exemplifica esta funcionalidade), que será retornado pelo arquivo que executará a consulta, e armazenar no input “id_estado” (você pode trazer quantos parâmetros quiser, e armazená-los em campos diferentes).

Parâmetros opcionais

Você pode utilizar os parâmetros opcionais para adicionar mais detalhes e personalizar cada autocomplete.

São eles:

identifier : útil para que o arquivo (php por exemplo) que processará a consulta possa identificar qual consulta será processada, e para identificar um autocomplete numa página que tenha mais de um autocomplete.

autoCompleteClassName : caso você queira utilizar um nome de classe css diferente da padrão (padrão ‘autocomplete’). Isso é útil para evitar conflitos, ou caso você queira estilizar diferentemente vários autocompletes.

selectedClassName : tem o mesmo propósito de autoCompleteClassName, porém se aplica à opção pré-selecionada dos resultados do autocomplete (padrão ‘sel’).

attrCallBack : caso você queira que os parâmetros que serão passados para a função de callback sejam armazenados em um atributo diferente do padrão, que é ‘rel’.

extraParamFromInput : útil caso você queira passar um parâmetro adicional à consulta, com o intuito de filtrar os resultados. Este valor deve estar em um campo input (desta forma o valor pode ser variável).

Compatibilidade

O Plugin simpleAutoComplete foi testado apresentando o mesmo comportamento, nos seguintes navegadores: IE6, IE7, IE8, Safari, Chrome e Firefox.

Licence

This plugin is under GNU GENERAL PUBLIC LICENSE.

Posts Relacionados:

• JQuery autocomplete em ajax com php e mysql