when I start typing a city in the field, I need to - not all have appeared in the tooltip, but just starting with the entered letter

If A is entered, Armavir and Abakan are shown.

<html> <head> <script type="text/javascript" language="javascript"> var autocomplete = ['абакан', 'армавир', 'баку', 'биробиджан', 'вильнюс']; window.onload = function() { document.getElementById('input').onkeyup = keyUp; } function keyUp(e) { var e = e||window.event; switch(e.keyCode) { case 40: var selected = -1; var spans = document.getElementById('autocomplete').getElementsByTagName('span'); for(i=0;i<=spans.length;i++) if (i in spans && spans[i].className == 'selected') { spans[i].className = ''; selected = i; } selected++; for(i=0;i<=spans.length;i++) if (i in spans && i == selected) { spans[i].className = 'selected'; } break; case 38: var spans = document.getElementById('autocomplete').getElementsByTagName('span'); var selected = spans.length; for(i=0;i<=spans.length;i++) if (i in spans && spans[i].className == 'selected') { spans[i].className = ''; selected = i; } selected--; for(i=0;i<=spans.length;i++) if (i in spans && i == selected) { spans[i].className = 'selected'; } break; case 13: var spans = document.getElementById('autocomplete').getElementsByTagName('span'); for(i=0;i<=spans.length;i++) if (i in spans && spans[i].className == 'selected') { document.getElementById('input').value = spans[i].innerHTML; document.getElementById('autocomplete').innerHTML = ''; } break; default: var div = document.getElementById('autocomplete'); div.innerHTML = ''; if (document.getElementById('input').value.length > 0) { autocomplete.forEach(function(elem, index) { div.innerHTML += '<span>'+autocomplete[index]+'</span><br />'; }); } } } </script> <style> input { position: absolute; top: 10px; left: 150px; } #autocomplete { position: absolute; top: 40px; left: 150px; } span.selected { background-color: red; } </style> </head> <body> <input type="text" id="input" /> <div id="autocomplete"></div> </body> </html>

  • If there is no special need in bicycle building , you can use ready-made: select2.org/getting-started/basic-usage - Alexandr Sysoev
  • Thanks, but no example works for them - NormalArs
  • <head> <link href = "css / select2.min.css" rel = "stylesheet" /> <script src = "js / select2.min.js"> </ script> </ head> <body> <select class = "js-example-basic-multiple" name = "states []" multiple = "multiple"> <option value = "AL"> Alabama </ option> <option value = "WY"> Wyoming </ option> </ select> <script> $ (document) .ready (function () {$ ('. js-example-basic-multiple'). select2 ();}); </ script> - NormalArs
  • returns a square with 2 states and no search - NormalArs
  • check the console, it seems to me that you do not have jQuery installed. $(document).ready(function() { $('.js-example-basic-multiple').select2(); }); This line will not run without jQuery. - Alexandr Sysoev

1 answer 1

Hi, may RegEx help you. Well, or simpler: elem.includes (value). Watch Fiddle

  default: var div = document.getElementById('autocomplete'); var value = document.getElementById('input').value; div.innerHTML = ''; if (value.length > 0) { autocomplete.forEach(function(elem, index) { var regex = new RegExp("^" + value, "i"); if(elem.match(regex)) div.innerHTML += '<span>'+autocomplete[index]+'</span><br />'; }); }