How to implement such a functional: when you type in the input name of the city is a list of cities suitable for it?

For example:

enter image description here

  • depends on where you get the data from ... actually, and where do you get it from? - Bogdan
  • Google autocomplete html javascript - stranger in the Q
  • the bottom line is - I enter the name of the city and I pop up such hints, then I click on the city and make a request to the database or api - Aslero February
  • Look, there are ready-made libraries for jQuery with 5/6 pieces minimum - Nilsan February
  • can you tell one?) - Aslero

2 answers 2

Here is an example, only with names. To solve the problem is enough:

 function myFunction() { let input = document.getElementById("myInput"); let filter = input.value.toUpperCase(); let ul = document.getElementById("myUL"); let li = ul.getElementsByTagName("li"); for (let i = 0; i < li.length; i++) { let a = li[i].getElementsByTagName("a")[0]; let txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().includes(filter)) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } //Tip: Remove toUpperCase() if you want to perform a case-sensitive search. 
 #myInput { width: 95%; /* Full-width */ font-size: 16px; /* Increase font-size */ padding: 12px 20px 12px 40px; /* Add some padding */ border: 1px solid #ddd; /* Add a grey border */ } #myUL { /* Remove default list styling */ list-style-type: none; padding: 0; margin: 0; width: 90%; } #myUL li a { border: 1px solid #ddd; /* Add a border to all links */ margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; /* Grey background color */ padding: 12px; /* Add some padding */ text-decoration: none; /* Remove default text underline */ font-size: 18px; /* Increase the font-size */ color: black; /* Add a black text color */ display: block; /* Make it into a block element to fill the whole list */ } #myUL li a:hover:not(.header) { background-color: #eee; /* Add a hover effect to all links, except for headers */ } 
 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> <ul id="myUL"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Cindy</a></li> </ul>

    This can be done using standard tools without scripts.

     <input list="OWNER" value="" type="text" /> <datalist id="OWNER"> <option>Москва <option>Санкт - Петербург <option>Иваново <option>Ярославль </datalist>

    • if there are 10 cities, the custom design of elements is not required, the filtering criteria "contains" - teran