How to do an ordered listing by letter?

Navigation
0

I suppose I have a list of names in array in Javascript. But I'm looking for a suggestion box style, where you just press an alphabetic key inside the field and as soon as you get key word tips for the letter you typed in.

Here is a simple example of an Ordered Listing in alphabetical order: 

<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>

In the case, I want to do something dynamic from this simple example above that would be a page with campo + div = resultado(array)

Just type a letter and it would be shown only whose name starts with the letter not importing the position of vetor / array ignoring the display of the others within div . Good people, the logic is this, if anyone can give me tips and / or simple examples will be of great help.

    
asked by anonymous 30.03.2016 / 19:50

2 answers

3

Do something like this: 

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

Look at the example: link This is + - how it should be done, you can elaborate more regularExpression to stay in a way that you prefer.

    
30.03.2016 / 20:01
0

Having this as an initial basis, he successfully completes this achievement, which he intended. Now I share with you.

Full Code / strong> as an example for study and / or search by other users. 

<!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 - See a sample

    
05.04.2016 / 16:27
Search PHP / MySQL (show only result exactly the same as typed) Click on a plus sign + and more inputs appear [duplicate]