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


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Input onde aparecem palavras conforme forem digitadas

17-05-2010 16:27

Olá!

Gostaria de saber como faço para que, num determinado campo de texto, apareçam palavras conforme o usuário digite suas letras iniciais.

Como no Google, por exemplo. Daí, quando a palavra na listinha for selecionada, o usuário é encaminhado para uma página correspondente.

Obrigado!


:)
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Input onde aparecem palavras conforme forem digitadas

17-05-2010 16:31

Seria um auto complete ou auto completar. Existe basicamente 2 tipos, um que coleta informações em um banco de dados, e outro que dá sugestões com algumas palavras que você cadastra no próprio documento. Qual pretende trabalhar?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Input onde aparecem palavras conforme forem digitadas

17-05-2010 16:40

O que cadastra no próprio documento, sem banco de dados e PHP...

Só em HTML e Javascript, mesmo.
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Input onde aparecem palavras conforme forem digitadas

17-05-2010 16:54

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Input onde aparecem palavras conforme forem digitadas

17-05-2010 17:05

No exemplo que vc sugeriu não tem como ir a uma página específica clicando somente na palavra que aparece na listinha...

Como devo proceder?
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Input onde aparecem palavras conforme forem digitadas

17-05-2010 17:09

Ai tem que ver no script o trecho que preenche o input, para ao invés disso pegar o valor e jogar em um location.href

Vou rodar o script aqui para ver se é possível
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Input onde aparecem palavras conforme forem digitadas

17-05-2010 17:21

Ok! :rofl:
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Input onde aparecem palavras conforme forem digitadas

17-05-2010 17:32

Ai um exemplo bem mais simples

http://www.javascript-examples.com/autocomplete-demo/

Quando você baixar, vai vir um arquivo chamado autocomplete.js

Procura pelo seguinte:

    /**     * Sets the input to a given value     *     * @param string id    The form elements id. Used to identify the correct dropdown.     */     function AutoComplete_SetValue(id)     {         __AutoComplete[id]['element'].value = __AutoComplete[id]['dropdown'].childNodes[__AutoComplete[id]['highlighted']].innerHTML;

Depois desse trecho coloca

alert(__AutoComplete[id]['dropdown'].childNodes[__AutoComplete[id]['highlighted']].innerHTML);

Só para você ver que vai mostrar o valor selecionado, ai você trabalha como precisa.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Input onde aparecem palavras conforme forem digitadas

18-05-2010 12:54

Olha, eu achei aqui no fórum esse exemplo: http://www.codigosnaweb.com/forum/Caixa ... 3_564.html

Funciona em todos os navegadores?
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Input onde aparecem palavras conforme forem digitadas

18-05-2010 15:21

Ele é um script bem básico, creio que funciona sim.

Não deu certo a dica acima?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Input onde aparecem palavras conforme forem digitadas

18-05-2010 19:22

Quando baixei o arquivo e abri o código, apareceu vários caracteres indetectáveis (uns quadradinhos) pelos navegadores...

Quando eu tentar de novo (após resolver esse problema), posto aqui os resultados!

;)

(Vc, Kleber, conhece alguma outra indicação?)
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Input onde aparecem palavras conforme forem digitadas

18-05-2010 19:24

Aqui uso o FF para ver e o Bloco de notas para editar o código, não tive problema.

Acho que esse script é o mais parecido para o que você falou que precisa.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Input onde aparecem palavras conforme forem digitadas

13-03-2013 12:24

Quase 3 anos após inatividade neste post, encontrei um exemplo bem bacana:

<script src="http://textextjs.com/js/jquery-1.8.2.js"></script> <script src="http://bundlejs.com/alexgorbatchev/products/textext/1.3.1?compress=true&bundles=core,ajax,arrow,autocomplete,filter,focus,prompt,suggestions,tags" type="text/javascript" charset="utf-8"></script>                         <input id="search" class="example" rows="1">           <script type="text/javascript">         $('#search')                 .textext({                         plugins : 'autocomplete filter',                         useSuggestionsToFilter : true                 })                 .bind('getSuggestions', function(e, data)                 {                         var list = [                                         'Basic',                                         'Closure',                                         'Cobol',                                         'Delphi',                                         'Erlang',                                         'Fortran',                                         'Go',                                         'Groovy',                                         'Haskel',                                         'Java',                                         'JavaScript',                                         'OCAML',                                         'PHP',                                         'Perl',                                         'Python',                                         'Ruby',                                         'Scala'                                 ],                                 textext = $(e.target).textext()[0],                                 query = (data ? data.query : '') || ''                                 ;                           $(this).trigger(                                 'setSuggestions',                                 { result : textext.itemManager().filter(list, query) }                         );                 })                 ; </script>

No entanto, quando o usuário pressiona a tecla "BackSpace" e apaga todas as letras do campo, aparece a lista dos resultados - que deveriam ser filtrados somente quando há a digitação de letras que correspondem aos mesmos.

O que faço para corrigir esse bug?
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Input onde aparecem palavras conforme forem digitadas

13-03-2013 13:24

Eu testei aqui, e não apagou todas as letras. Qual navegador está usando?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Input onde aparecem palavras conforme forem digitadas

13-03-2013 14:52

Google Chrome Versão 25.0.1364.172 m.

A lista completa aparece assim que todas as letras digitadas pelo usuário são apagadas. :s
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Input onde aparecem palavras conforme forem digitadas

13-03-2013 16:04

A versão do chrome aqui é 25.0.1364.152 m. Não ocorreu esse problema. Agora o chrome está atualizando. Vou aguardar e testar com a nova versão.
0
A melhor hospedagem para o seu site HostGator!
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Input onde aparecem palavras conforme forem digitadas

13-03-2013 16:07

Atualizou aqui para a versão 25.0.1364.172 m. Testei o script, e funciona sem problema. Acho que pode estar havendo algum conflito entre esse script e outro que você tenha na mesma página.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Input onde aparecem palavras conforme forem digitadas

13-03-2013 17:42

Certo... Digite "Bas" (exemplo). Aparecerá na lista o termo "Basic". Apague tudo com a tecla "BackSpace": a lista com todos os termos que deveriam ser filtrados pelas letras iniciais aparecem!
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Input onde aparecem palavras conforme forem digitadas

13-03-2013 18:48

Entendi. O que acontece é que o script, é ativado após começar a digitar as letras. Quando apaga tudo, o script ainda está ativo.
O ideal é ver na documentação do script se tem algo para contornar isso.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Input onde aparecem palavras conforme forem digitadas

13-03-2013 20:37

Não há nada que informe como contornar o erro. :/

Há alguma outra sugestão igualmente boa para um script de autocompletar?
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Input onde aparecem palavras conforme forem digitadas

13-03-2013 21:02

Tenta o seguinte:

Após essa linha

            textext = $(e.target).textext()[0],             query = (data ? data.query : '') || ''             ;

Coloca

var Lista = ""; if( $("#search").val() !="" ) Lista = list;

Troca essa linha

            { result : textext.itemManager().filter(list, query) }

Por essa

            { result : textext.itemManager().filter(Lista, query) }

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Input onde aparecem palavras conforme forem digitadas

13-03-2013 22:40

Nossa, cara! Deu certo! Hahahah! :D


Você é um gênio!
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Input onde aparecem palavras conforme forem digitadas

13-03-2013 22:45

;)
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Input onde aparecem palavras conforme forem digitadas

13-03-2013 23:52

-E o que faço para que cada item da lista corresponda a um link?
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17722
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Input onde aparecem palavras conforme forem digitadas

14-03-2013 08:17

Você pode usar esse script

$('#search').click(function(event) { $('body').bind('click',function() {   location.href="pagina.php?valor="+$('#search').val();   }); event.stopPropagation(); });

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Bing [Bot]