0

Suponho que tenho uma lista com nomes, em array no Javascript. Porém busco uma forma de fazer ao estilo caixa de sugestões, onde você só pressiona uma tecla alfabética dentro do campo e tão logo lhe é exibida dicas de palavras chaves referente a letra digitada.

Segue um simples exemplo base de Listagem Ordenada em ordem alfabética:

<script>
    letras = new Array("C","B","A");
    for (i=0;i<3;i++)
{ 
    letras.sort();
    document.write(+ i + " array: " + letras[i]);
    document.write("<br>"); 
}           
</script>

No caso, desejo fazer algo dinâmico a partir desse simples exemplo acima que seria uma pagina com campo + div = resultado(array)

Basta você digitar uma letra e seria mostrado somente cujo nome inicia-se com a letra não importando a posição do vetor / array ignorando a exibição das demais dentro da div. Bom pessoal, a lógica é essa, se alguém puder me dar dicas e/ou simples exemplos será de grande ajuda.

0

2 Respostas 2

3

Faça algo assim:

letras.filter(function(item){
   var inputValue = document.getElementByid('id').value;
   var regex = new RegExp(inputValue);
   return item.match(regex);
});

Olha o exemplo: https://jsfiddle.net/mgv2uyw1/ Isso é +- como deve ser feito, você pode elaborar mais as regularExpression para ficar de uma forma q vc prefira.

5
  • Creio que para ficar 100% teria de alterar a REGEX para '/'+inputValue+'.*/i', se manter assim, só vai retornar item que sejam exatamente igual ao inputValue. 30/03/2016 às 20:31
  • 2
    RegExp('^'+inputValue+'.*', 'i'); 30/03/2016 às 20:47
  • Eu fiz testes e aparentemente qndo vc cria como new RegExp não precisa das '/' '/' da uma olhada no fiddle, mas como eu falei, precisa melhorar a regexp para atender exatamente a necessidade
    – Guerra
    30/03/2016 às 20:49
  • Isso eu tambem esqueci que não necessitava, mas a regex fica esta que coloquei a cima. 30/03/2016 às 20:53
  • Vai depender do que ele vai querer fazer, dessa forma vai pegar somente quando começar com a string certo?(não sou CRANIO em regex rs perdoe a ignorancia) eu fiz um teste sem pattern nem nada, só usando a string por exemplo com "a" somente ele vai pegar todas as palavras que tiver "a" em qualquer lugar, já com "buf" ele trouxe somente o bufalo. mas agradeço o complemento da resposta
    – Guerra
    30/03/2016 às 21:00
0

Tendo isto como base inicial, conclui com êxito tal feito, que pretendia. Agora, compartilho com vocês.

Caixa de Sugestão - Lista Ordenada por Letra, afim de ter uma idéia de como pode ser conseguido este efeito, posto o código completo como exemplo para estudo e/ou pesquisa por outros usuários.

<!DOCTYPE html>
<html>

<head>

<title>Caixa de Sugestao - Lista Ordenada por Alfabeto</title>

<style>

 	.campo
{
   	color:#333;
   	width:320px;
   	height: 32px;
   	border:1px solid #ccc;
   	font-family: "tahoma";
   	font-size: 11pt;
   	text-vertical:top;
   	padding:7px 5px 7px 5px;
   	float:center;
}

.dicas
{	
   	width: 320px;
   	margin: 0 auto;
   	position: relative;
   	max-height: 100px;
   	border: 1px solid #999;
   	background-color: #fff;
   	overflow:auto;
}
</style>

<script>

<!--// Bloco 1 - rotina 2 em 1 - Validar Campo & Exibir/Fechar Div //-->

function validar(){
document.getElementById('1').style.display='block';
if(document.getElementById('txt').value.length < 1){ 	//Esta linha ira validar se uma tecla foi pressionada dentro do campo
document.getElementById('1').style.display= "block";
document.getElementById('txt').focus();
return false
}
document.getElementById('1').innerHTML = "";
}

<!--// Bloco 2 - Listagem de Nomes - Ordenada por Letras do Alfabeto //-->

function lista(){
letras = ["Alex","Adrian","Adriano","Alexander","Alessandro","Ana","Aline","Ãgata","Alice","Amanda","Bryan","Breno","Bruno","Bernardo","Benjamin","Bruna","Belisa","Brenda","Bárbara","Beatriz","Caio","Cauê","Cauã","Carlos","Cléber","Carol","Clara","Camila","Carolina","Clarissa","David","Diego","Diogo","Danilo","Daniel","Dalila","Diana","Débora","Daniela","Eduardo","Elvis","Emanuel","Edson","Enzo","Eliza","Ãrica","Estela","Eduarda","Elizabeth","Felipe","Fábio","Fabiano","Francisco","Fernando","Felícia","Fabíola","Filipa","Flávia","Fabiana","Gabriel","Gustavo","Giovanni","Guilherme","Gregório","Gabriela","Giulia","Gisela","Graziela","Gabriele","Hugo","Hélio","Heitor","Hércules","Henrique","Helena","Heloísa","Igor","Inácio","Ivan","Ian","Iago","Ãris","Iara","Isa","Isadora","Isabel","Joaquim","Jonathan","José","jonas","joão","Jéssica","Joyce","Júlia","Juliana","Kevin","Kaio","Kelvin","Karina","kethlen","karen","kelly","Lucas","Leandro","Luciano","Lúcio","Lívia","Lis","Lilian","Letícia","Larissa","Matheus","Marcos","Miguel","Michel","Manuel","Marina","Mariana","Melissa","Marília","Micaela","Natanael","Nicolas","Natan","Nataniel","Nilton","Nara","Nina","Núbia","Natacha","Oliver","Otávio","Orlando","Olívia","Pedro","Paulo","Pablo","Paula","Pietra","Priscila","Paloma","Patrícia","Rafael","Ricardo","Rodrigo","Rômulo","Ronaldo","Reinaldo","Rafaela","Rúbia","Raquel","Rita","Rebeca","Samuel","Sérgio","Santiago","Sabrina","Serena","Sara","Sofia","Samara","Tiago","Tomás","Túlio","Theo","Thiago","Tabita","Tamara","Taís","Tamires","Talita","Ulisses","Umberto","Ueber","Victor","Vinicíus","Vagner","Violeta","Vitória","Valesca","Vanessa","Valquíria","Wanessa","Walter","Wilton","Yudi","Yuri","Yago","Yan","Yara","Yohana","Yasmin","Zoe"];
letras.sort();
alfabeto = letras.filter(function(el){
campo = document.getElementById('txt').value;
regex = new RegExp('^'+campo+'.*','i');
return el.match(regex);
});

<!--// Percorrendo os elementos do Array, apos digitar a letra desejada //-->
<!--// Sera montada a tabela dinamica com os resultados dentro da Div //-->

for (var i in alfabeto){ 
    tabela = document.getElementById('1');
tabela.innerHTML += "<table width='100%'><tr><td>"+ alfabeto[i] +"</td></tr></table>";
}
}

<!--// Bloco 3 - Selecionar Linha da Tabela - Dando Cor ao Fundo da Linha ao Passar o Mouse //-->

window.onmouseover=function(){
td = document.getElementsByTagName('td');
for(i in td){
td[i].onmouseover=function(){ preto =this.style.backgroundColor='#999999'; document.getElementsByTagName('td') = preto }
td[i].onmouseout=function(){ branco =this.style.backgroundColor='#fff'; document.getElementsByTagName('td') = branco  }
td[i].onclick=function(){ valor = this.innerHTML; document.getElementById('txt').value = valor; alert( "Oi " + valor + ", tudo bem!");}
}
}

</script>

</head>

<body>

<h2>Indice de Nomes</h2>

<h3>Lista de Nomes de A a Z</h3>

<h4>Digite uma letra abaixo:</h4>
<center>

<input onkeypress="validar()" class="campo" id="txt" value="" onkeyup="lista()" type="text">

<div id="1" class="dicas" style="display: none;" onclick="this.style.display='none';"></div>

</center>

</body>

</html>

w3schools - Veja uma amostra

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 .