JSFiddle - React, Tailwind, and code Playground

by Ea Bangalore

HTML

<body>

<div class="main-div">


<input id="autosuggestme"/>

<div class="result">
   <ul>
     <li>hello world</li>
     <li>hello world</li>
     <li>hello world</li>
     <li>hello world</li>
     <li>hello world</li>
   </ul>
</div>
</div>
</body>

CSS

*{
  box-sizing:border-box;
}

body{
  height:100%;
  background:#555555;
}

.main-div{
  
  display:grid;
  grid-template-columns:1fr;
  min-height:100%;
  grid-gap:10px;
  background: #555555;
}

.result{
  border: 1px solid black;
  background:#888888;
}
#autosuggestme{
  background:#999999;
  border: 1px solid black;
  color:black;
}

JavaScript

var searchNames = ['dog','bob','top','may','monkey','gunda','apple'];

$('#autosuggestme').keyup(function(){
var inputValue = $(this).val();
$('li').remove();
if(inputValue.length == 0 || !inputValue.trim()){
return;
}


$.each( searchNames, function( index, value ){
    if(value.startsWith(inputValue)){
       $('ul').append('<li>'+value+'</li>');
    }
  });   
});