Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

GustavoDose

Pesquisa Avançada

Por , em Desenvolvimento frontend

Recommended Posts

GustavoDose    1

GustavoDose
Postado

Bom dia, estou com um projeto em andamento onde tem que fazer uma pagina de pesquisa.

 

 

Porem gostaria que quando o usuario entrasse no site e digitasse alguma coisa com o teclado automaticamente abriria uma pagina de pesquisa.

 

Não tenho nem ideia de como fazer ou de como procurar para fazer.

 

exemplo doque estou falando é este site http://www.superplayer.fm/ assim que começa a digitar abre a pagina de pesquisa para o usuario

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

ouça o teclado do usuário com o evento onkeyuop, ai guarde oque ele for digitando em uma variavel.

 

depois vc abre um modal, como foi o caso ai.

 

Vai precisar de bastante javascript.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

a pesquisa em si, é feita com o server-side.(php, ruby...)

 

o evento que citei é para ouvir oque o usuário tá digitando.

 

 

Em qual parte do processo está a sua dúvida ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Eu falei ali em cima.. exemplo:

<div id="t"></div>
<script>
var keyTable = {
    '65': 'a',
    '66': 'b',
    '67': 'c',
    '68': 'd',
    '69': 'e',
    '70': 'f',
    '71': 'g',
    '72': 'h',
    '73': 'i',
    '74': 'j',
    '75': 'k',
    '76': 'l',
    '77': 'm',
    '78': 'n',
    '79': 'o',
    '80': 'p',
    '81': 'q',
    '82': 'r',
    '83': 's',
    '84': 't',
    '85': 'u',
    '86': 'v',
    '87': 'w',
    '88': 'x',
    '89': 'y',
    '90': 'z'
}
var userTyped = '';
document.addEventListener("keyup", function(e){
    if (keyTable[e.keyCode] !== undefined ) {
        userTyped += keyTable[e.keyCode];
    }

    document.getElementById("t").innerHTML = userTyped;
});
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

andersonseifert    10

andersonseifert
Postado

Outro exemplo que utilizo :

 

		// evento do enter da pesquisa	
				$('#pesquisar').keypress(function(e) {
					var keycode = (e.keyCode ? e.keyCode : e.which);
					if(keycode == '13') 
						pesquisar($(this).val());
				});
            })
        </script>      
    </head>
    <body>    
            <div id="main">
<input type="text" id="pesquisar" placeholder="Informe o Produto" >
<a href="" onclick="pesquisa($('#pesquisar').val())">  <img id="imgsearch" src="geral/images/search.png" width="30"/></a>
                    
            </div>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito