Simple AutoComplete JQuery Plugin
DOWNLOAD
http://blog.idealmind.com.br/exemplos/simpleautocomplete/simpleautocomplete.rar
DEMO
http://blog.idealmind.com.br/exemplos/simpleautocomplete/
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.
This plugin is perfect!!! But there is one problem: IE… it doesn’t work good with Internet Explorer…it’s a CSS problem…have u any hack for it?
Thanks from Italy!
There’s a session that explains how to adjust it for IE (search by ‘To solve problems of positioning the autocomplete in IE6′ in this page). You can only set width and height into input text, or add a hack into CSS file.
Best regards
O IE8 acusa o seguinte erro: “O objeto não dá suporte para a propriedade ou método” e identifica o seguinte local: “$(‘#txtNomeAluno’).simpleAutoComplete(…”.
Acredito ter feito exatamente como indicastes.
Podes me in
Now the css style works for IE6, IE8 and Firefox:
Solution – Alter the file simpleAutoComplete.js.
Steps:
1 – Delete the if “if (navigator.appVersion.match(‘MSIE 6′)){ … }”.
2 – Insert the code above after the line “autoCompleteList.insertAfter(thisElement);”:
var position = thisElement.position();
var height = thisElement.height();
var width = thisElement.width();
$(‘div.’ + classAC).css({
‘top’: (height+position.top+6) + ‘px’,
‘left’: (position.left)+’px’,
‘margin’: ’0px’
});
$(‘div.’ + classAC + ‘ ul’).css({
‘margin-left’: ’0px’
});
3 – Ready to use!
Eu ia tirar um fds para fazer esta atualização de forma a tornar o plugin plug and play.
Vou fazer alguns testes e vou incluir a atualização!
Muito obrigado!
Incluí as atualizações da @Simone , que torna padrão o comportamento do autocomplete no IE6, IE7, IE8, Firefox, Chrome e Safari.
Inclui também o fechamento automático ao se clicar fora do autocomplete, e a iserção automática do atributo autocomplete=”off”, para evitar conflitos com o autocomplete do browser.
$(“#input_fied_id”).simpleAutoComplete(“query_processor.php”);
However, I’m getting a problem: When I press ENTER, I am able to put the value of the selected item from the list but the submitted form returns the search criteria (I typed on the form field) but not the selected item from the list (or the value that sent to the form field).
to be clearer:
- I have a form named: txtSearchField
- I typed ‘me’ and the list came up with a selection
- I scrolled up and down using the arrow keys, the plugin worked well with the selection routine
- Once I decided to select an item ‘Mexico’ (for example)
- ‘Mexico’ appears on the form field: txtSearchField
- The form submits
- The submitted info yields txtSearchField = ‘me’ and not ‘Mexico’ as intended/expected
Tanto faz, esse “#input_fied_id” é só uma referencia ao plugin de qual a id do campo que ele deve processar…
ao tipo
no jquery ficaria assim:
$(“#Robson”).simpleAutoComplete(“query_processor.php”);
Entendeu??
Rio de Janeiro (RJ) ??
Robson, usando o JQuery, qual o caminho para que no simpleautocomplete mostrar dados adicionais como no autocomplete? pelo primeiro exemplo temos: ao digitar Rio de Janeiro mostra tambem a sigla :
Rio de Janeiro (RJ) . temos como fazer isto pelo simpleautocomplete ?
exp. Select * from dbo.customers Where Customername LIKE ?????….
Primeiramente quero agradecer pelo tutorial, é mt bom.
Bom eu queria a opção de “select_first”, eu procurei no script do plugin e não vi nenhuma referencia, queria saber se ele possibilita essa função.
Wellington, usando o JQuery, qual o caminho para que no simpleautocomplete mostre dados adicionais como no autocomplete? pelo primeiro exemplo (autocomplete),temos: ao digitar Rio de Janeiro mostra tambem a sigla :
Rio de Janeiro (RJ) . temos como fazer isto pelo simpleautocomplete ?
Não consigo fazer funcionar o enter ao selecionar os dados.
Porém, utilizando o exemplo do Wellingon, não há problemas….
Alguém tem idéia do que possa ser?
Bom, eu tive pouquíssimo tempo para desenvolver a documentação, mas assim que der, eu usarei a sua sugestão. Mas é simples: o servidor deve dar uma saída gerando uma lista em html, com os parâmetros opcionais para callback. Analisando um pouquinho mais o código php, e fazendo a analogia com o asp, você vai entender.
Peço desculpas, mas agora estou com tempo curto (como sempre! rs), e não posso te ajudar muito…
Abraço!
The plugin was not tested in JQuery 1.2.6. Why you don’t upgrade your JQuery lib?
Best regards
Bom, quando comecei a ler, a primeira coisa que me veio à cabeça foi o z-index.
Você setou o z-index nas duas divs, a que carrega o iframe e o auto complete (.autocomplete)?
Estou com pouco tempo agora para efetuar testes
Abraço!
Yep! I have this problem too. Please help somebody!
A funcionalidade de dar enter e selecionar o item é automática, e não precisa de nenhuma configuração adicional.
Qual o navegador que você está usando?
Abraço!
here is my workaround for problem with submitting form when you select item from list using “enter”-key:
1. find this string in js-code:
thisElement.keyup(function( ev )
and replace it with:
thisElement.keydown(function( ev )
2. find this code:
if (kc == 13)
{
$(‘div.’ + classAC + ‘ li.’ + selClass).trigger(‘click’);
}
and replace it with:
if (kc == 13)
{
$(‘div.’ + classAC + ‘ li.’ + selClass).trigger(‘click’);
return false;
}
o plugin tá funcionando certinho só tem um probleminha, acredito que seja no css. No ie (pra variar) e no natscape, a div de pesquisa fica atrás dos textos e do form. Já usei o z-index bem estourado para essa div (10000000000) e negativo para os campos de input e ainda assim dá esse erro.
Mexi no script js para ajustar a div para um z-index alto mais não funciona. Vc pode me dar uma dica de como eu resolvo isso?
Não consegui reproduzir o erro. Quando você acessa o exemplo (http://blog.idealmind.com.br/exemplos/simpleautocomplete/) no ie e no netscape,, você vê o erro que você relatou?
Abraço
Você não precisa clonar!
basta baixar e usar!
Primeiro quero agradecer-lhe pela contribuição.
Estou tentado utilizar sua ferramenta no localhost (utilizando o easyphp) porém não estou conseguindo êxito, já fiz alguns testes fazendo a conexão e busca dos dados pelo index.php, e a query retornou os resultados, então, presumisse que a consulta está sendo efetuada perfeitamente.
Já testei, pela exibição do código-fonte do mozilla, a existência dos arquivos: jquery.js, simpleAutoComplete e simpleAutoComplete.css, e todos eles estão sendo carregados.
Você teria alguma ideia do que está causando este probleminha?? ainda não testei direto no meu servidor de hospedagem, porém gostaria de utiliza-lo no localhost para implementar melhor.
Atenciosamente
verifique se o código php está seguindo o padrão da documentação, de forma a gerar os dados corretos para a leitura do js.
Me passe o código que você está utilizando para eu ver o que você está tentando fazer.
Wellington, aposto que eles estavam a usar Mozilla Firefox ou Google Chrome como eu. A funcionalidade do Enter só funciona com o IE pelo menos na versão 8, na versão 9(beta) tb n funciona e a caixa de sugestão texto fica em baixo.
Olá Wellington.
É um aplicativo que estou montando para uma empresa. Se vc me passar algum email para que eu poss te mandar o link para vc visualizar o que ocorre fica mais fácil.
Já tentei várias formas de acerto e nada. Não consigo entender o porquê que isso ocorre uma vez que mexi no z-index (css e js) e nada. A coisa tá feia de arrumar.
Se vc puder me ajudar eu agradeço.
PS. Os campos de input e os textos são gerados dinamicamente (objetos). Não sei se isso tem um pouco de interferência. Mais no ie (pra variar…) e no netscape a coisa num rola.
Estou com o mesmo problema do Alexandre.
Quando gero campos input por php(dentro de um laço), os auto-completes funcionam, mas quando gero os input dinamicamente( por javascript), os autos-completes não funcionam.
Se puder me ajudar.
if(content != null) { // fix para erro no IE8 quando vc pressiona up-down varias vezes
content = content.replace(//i,”"); // iE8 busca case-sensitive, aqui uso regex case-insensitive
content = content.replace(//i,”"); // idem
content = content.replace(“&”,”&”);
jQuery(‘#textoBusqueda_autocomplete’).val(content);
}
[]s
Em primeiro lugar, meus parabéns pelo ótimo trabalho que fizestes. Eu estou com um problema na utilização do autocomplete, pois quando me vem a lista de sugestões e teclo enter o formulário é submetido. Mas isso só acontece quando programa a função de callback para setar o valor de um campo hidden. Quando o callback seta campos text não acontece o problema.
Abraço,
Julio
não apartir de 1… porque minha consulta aqui é muito grande e aparece muita coisa.. digitando apenas a letra ‘a’
Thank’s for your script. It works fine except with keypad 0. If i enter, for example, 100 on main keyboard it works well an fores as soon as I enter a 0. But on the keypad, I need to press space in order to fire the result. Any idea how to correct this?
Thank’s,
Mic
no php, coloque um
{
ele da pau, no enter!!
tipow ele digita, dai aperta a flecha para baixo, dai quando da enter ele nao envia no form o valor! sabe como posso arumar isso ?
O ideal é utilizar um id, pois segue os padrões w3c.
Abraço!
Não te respondi antes pois viajei e dei uma pausa no sistema que estava implementando.
Testei novamente, porém, diretamente no servidor (em vez de testar no localhost daqui da empresa) onde o sistema está alocado e o plugin está funcionando perfeitamente.
Novamente volto a agradece-lo, imensamente, pela contribuição para a comunidade.
Um abração!
Como retiro o parametro query? Utilizo codeigniter e não aceita parametro por url, então quero passar apenas a url direto para url sem a ?query=$var , é possível com seu plugin?
Algo do tipo: paraname:false?
Espetacular seu script, custei muito a encontrar algo de facil implementação e suprisse minha necessidade principal, o preenchimento de um campo hidden com o ID.
Mas estou escrevendo pra tirar uma duvida, a respeito do uso das setas para navegar na lista e em seguida o uso da tecka Enter para selecionar o registro e preencher o campo.
No meu caso só funciona com o clique do mouse, ou seja, tem que clicar no nme do estado, ou os campos extras nao sao preenchidos. Obs.: Editei o script pra limitar somente a ID e NOME.
Agradeço a ajuda desde já,
Boa noite.
Sandro.
Estou com o mesmo problema pois como o meu botão (input) é do tipo submit, quando aperta o enter envia o formulário sem selecionar o estado corretamente .. o ideal era q não submetesse o form no enter se o usuário tiver selecionando o item na lista. Só submeter quando o item já tiver selecionado.
thanks from Palermo(IT)
2-O meu também não funciona o enter, so clicando, algué conseguiu resolver isso?
Parabéns pelo trabalho e desde já agradeço a toda ajuda!
Bom, estou com o mesmo problema do Lucio e de outros 2 colegas aqui. Quando começo a digitar a palavra no campo, aparece o resultado no autocomplete certinho; porém ao selecioná-lo com as setas do teclado e pressionar “enter”, não carrega para o “input”.
Pelo que percebi, acontece quando colocamos a busca (input) dentro de um formulário ” “. Ao tirar o formulário funciona normalmente, mas não serve, pois não é possível submeter (cadastrar).
Se o mestre aí conseguir resolver essa, ou nos orientar, ficarei mais grato ainda.
Baixei os arquivos e rodou perfeitamente. Parabéns!
Adaptei para o meu site e agora preciso fazer uma busca num único campo fazendo o ajax ler de 3 campos sql diferentes.
Por exemplo quando começar a digitar num campo só, ele faça a busca em 3 campos de sql.
Segue exemplo que deu certo, mostra tudo correto porém ele “come” cada letra digitada nas buscas da listagem abaixo que são os outros 2 campos sql:
———————————-
$sql = “SELECT DISTINCT psoldagem1, psoldagem2, psoldagem3 FROM qualificacoes WHERE locate(‘$q1′,psoldagem1) > 0 OR locate(‘$q2′,psoldagem2) > 0 OR locate(‘$q3′,psoldagem3) > 0 ORDER BY locate(‘$q1′,psoldagem1), locate(‘$q2′,psoldagem2), locate(‘$q3′,psoldagem3) LIMIT 10″;
$r = mysql_query( $sql );
if ( $r )
{
echo ”.”\n”;
while( $l = mysql_fetch_array( $r ) )
{
$p1 = $l['psoldagem1'];
$p2 = $l['psoldagem2'];
$p3 = $l['psoldagem3'];
@$p1 = preg_replace(‘/(‘ . $q1 . ‘)/i’, ‘$1′, $p1);
@$p2 = preg_replace(‘/(‘ . $q2 . ‘)/i’, ‘$2′, $p2);
@$p3 = preg_replace(‘/(‘ . $q3 . ‘)/i’, ‘$3′, $p3);
echo “\t”.”. $p1 .”.”\n”;
echo “\t”.”. $p2 .”.”\n”;
echo “\t”.”. $p3 .”.”\n”;
}
echo ”;
}
———————————-
Então, a minha dúvida é como fazer essa busca em 3 campos sql diferentes sem que ele suma com as letras digitadas.
Aguardo retorno, pode ser por email mesmo.
Abraço.
Primeiramente parabens pelo tópico e por outras soluções maneiras, como essa.
Apliquei ela em meu sistema, mas estou com alguns probleminhas…a variavel q do arquivo php esta sempre indo nula…
Já viu isso acontecer? Desculpa o incomodo.
Abs
Qual seria a solucao para isso.
abraço,