Входной поиск через массив - PullRequest
Новая
       25

Входной поиск через массив

0 голосов
/ 18 марта 2020

ну, я довольно новичок в Javascript, и я хотел бы улучшить следующий код, который я сделал, чтобы упорядочить кнопки на основе поиска, я не знаю, что еще я должен добавить, чтобы это работало, чтобы это это то, что я делал до сих пор, каждый комментарий или предложение будут приветствоваться

Большое спасибо! 

//Variables

let valorBusqueda = document.querySelector('#valor');
let opcBusqueda = document.querySelector('.opc-busqueda');



//Event Listener

valorBusqueda.addEventListener('keyup', keyUpCampo);



//Funciones

function keyUpCampo() {    
  
    //Muestra el menu de sugerencias
    opcBusqueda.style = "display: flex; flex-direction:column; width:165px";  
  
    sendToPage();
    
}




var sendToPage = function () {
  //Get the input value by finding the element by its ID
  let busqueda = document.getElementById('valor').value;


  //Check if the value is in the array
  var sugerencias = ['marvel','maravilloso', 'futbol','goku ssj','falafel','robocop', 'rick','ricardo', 'morty', 'x-men', 'starwars', 'goku', 'bulma', 'vegeta', 'simpsons', 'homer', 'cartoon'];
  var coincidencias =[]
  for (indice in sugerencias) {

    let lSug = sugerencias[indice].charAt();

    if (lSug.includes(busqueda.charAt())) {
        
       coincidencias.push(sugerencias[indice]);

        opcBusqueda.innerHTML =  `<input type="button" value=${coincidencias[0]} >
                                  <input type="button" value=${coincidencias[1]} >
                                  <input type="button" value=${coincidencias[2]} >      
      `        
    }   
    
  } 

}
<body>

    <div class="busqueda">        
        <div class="inputs">
            <input id="valor" type="text" placeholder=" Busca hashgtags, temas, busca lo que quieras..">
            
        </div>
    </div>    
    
    <div class="opc-busqueda" style="display: none;">
       
    </div>
   
</body>
...