Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17720
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Caixa de sugestões

19-04-2007 23:41

Esse script gera uma caixa de sugestões de palavras a partir que determinada quantidade de letras forem digitadas em uma caixa.

Nesse exemplo ao digitar na caixa: cas
ele retorna as sugestões: casa, casca e cascalho

Veja o código e explicações.

<style type="text/css"> /* estilo da caixa */ #rolagem { width:145px; height:40px; padding: 1px 1px 1px 1px; background-color:#fefefe; overflow:auto; overflow-x:hidden; } </style>


<script> /* essa função é ativada ao clicar no link de alguma sugestão */ function muda(valor) { document.form.texto.value=valor; }   /* essa função mostra a caixa de sugestões */ function ativa() { document.getElementById("conteudo").style.display="block"; }   /* essa função esconde a caixa de sugestões */ function esconde() { document.getElementById('conteudo').style.display='none' }   /* aqui é o início da verificação do texto digitado */ function troca() {   // obtemos o valor digitado var campo = document.form.texto.value;   // se a palavra começar com: cas, insere o conteúdo da var: cas var referencia_cas="cas"; var cas = ""; cas+='<span id="rolagem">' cas+='<a href="javascript:muda(\'casa\')">casa</a><br>' cas+='<a href="javascript:muda(\'casca\')">casca</a><br>' cas+='<a href="javascript:muda(\'cascalho\')">cascalho</a><br>' cas+='</span>'   // se a palavra começar com: bra, insere o conteúdo da var: bra var referencia_bra="bra"; var bra = ""; bra+='<span id="rolagem">' bra+='<a href="javascript:muda(\'bravo\')">bravo</a><br>' bra+='<a href="javascript:muda(\'braço\')">braço</a><br>' bra+='<a href="javascript:muda(\'brabo\')">brabo</a><br>' bra+='</span>'   // quando o valor no input for igual a var referencia_cas, mostra as sugestões para cas if(campo==referencia_cas) { document.getElementById("conteudo").innerHTML=cas; }   // ou, quando o valor no input for igual a var referencia_bra, mostra as sugestões para bra else if(campo==referencia_bra) { document.getElementById("conteudo").innerHTML=bra; }   // caso contrário, mostra: sem sugestão else document.getElementById("conteudo").innerHTML="sem sugestão"; } </script>


<form name="form"> <input type="text" name="texto" value="" onKeyup="troca();ativa();"> <div id="conteudo" style="display:block;" onClick="esconde()" style="position:relative;"></div> </form>

1
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado