2

Possuo um textarea e gostaria de saber como detectar o caractere : e, a partir disso, mostrar sugestões listadas em uma array com todas as possibilidades de "auto complete" e ir filtrando os resultados...

Segue abaixo um exemplo:

inserir a descrição da imagem aqui

Já pensei em detectar a o caractere : a partir do keydown utilizando o event keyCode porém não sei como faria já que no Windows teria que detectar o shift + : e no Mac já não sei se é a mesma coisa. Pensei também em apenas detectar o caractere : a partir do val() do textarea mas não sei como poderia proceder.

Qual é a maneira correta de fazer isso? E, como fazer?

De preferência, gostaria de aprender realmente a como fazer somente com jQuery e sem o uso de bibliotecas.

Obrigado!

1 Resposta 1

2

Existem algumas bibliotecas por ai para fazer autocomplete dentro de uma textarea. Já pensou em usar uma? Por exemplo: https://github.com/yuku-t/jquery-textcomplete

Se não me engano, a maioria delas detecta a posição do cursor dentro da textarea ao invés de olhar pro keycode. Uma vantagem disso é que dá pra ir filtrando o dropdown a medida que você digita. O ruim é que os browsers não tem uma API consistente pra pegar a posição do cursor.

3
  • Isso resolveria o meu problema, mas, tenho uma dúvida, não teria como fazer isso sem a utilização de plugins? Gostaria de aprender...
    – Igor
    Commented 25/04/2015 às 0:26
  • Você pode olhar o código fonte dos plugins e ver o que eles fazem por baixo dos panos :) Não lembro exatamente os detalhes, só que tem APIs que permitem que você pegue o texto logo atrás do cursor.
    – hugomg
    Commented 25/04/2015 às 1:17
  • Uma forma de fazer seria monitorar o evento 'keyup' e a cada disparo deste evento você busca em .val().strpos(':') se o valor retornado for diferente de -1 significa que achou o ':', dai é só você executar sua rotina de sugestões Commented 25/04/2015 às 5:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .