Алгоритм для автокомплита

282

14 февраля 2017, 17:39

Есть необходимость создать автокомплит. Вводишь значение в input, дальше он сравнивает его с первыми буквами значений из массива строк, допустим языков программирования. На выходе в div должен создавать список со значениями из массива данных в которых есть совпадение с введеным в input значением. Сравнение производится по первым буквам. Пытался решить эту задачу топорно и напрямую, просто выводить все значения и скрывать непроходящие проверку, и с каждым новым символом введеным в input просто прогонять все это заново по всему списку. Дак вот, как реализовать оптимизированный легкий алгоритм поиска совпадений в строках, при условии, что в input могут добавлять символы, так и удалять их. Любая информация будет полезна. Язык - чистый javascript

function visibility() { 
 
var div = doc.getElementById("myDropdown"); 
var input = doc.getElementById("myInput").value; 
 
if (input.length >= 1) { 
    div.style.display = "block"; 
} else { 
    div.style.display = "none";  
} 
} 
function filterFunction() { 
 
  var input = doc.getElementById("myInput"); 
  var filter = input.value.toUpperCase(); 
  var div = doc.getElementById("myDropdown"); 
  var a = div.getElementsByTagName("a"); 
 
  for (var i = 0; i < a.length; i++) { 
    if (a[i].innerHTML.toUpperCase().indexOf(filter) == 0) { 
      a[i].style.display = "block"; 
    } else { 
      a[i].style.display = "none"; 
    } 
  } 
}

#myInput { 
  background-color: #f9f9f9; 
  outline: none; 
  border: 2px solid #cccccc; 
  padding: 5px; 
  width: 300px; 
  margin-top: 5px; 
  font-family: "Segoe"; 
  color: #404040; 
  font-size: 14px; 
} 
#myInput:focus { 
  border: 2px solid blue; 
} 
.dropdown { 
  position: relative; 
  display: inline-block; 
  width: 360px; 
} 
.dropdown-content { 
  display: block; 
  position: absolute; 
  min-width: 230px; 
  height: 300px; 
  overflow-y: hidden; 
  overflow-x: hidden; 
  box-shadow: 0px 4px 4px 4px rgba(0, 0, 0, 0.2); 
  z-index: 1; 
  width: 360px; 
  display: none; 
} 
.dropdown-content a { 
  color: black; 
  width: 400px; 
  padding: 5px 10px; 
  height: 22px; 
  text-decoration: none; 
  color: #494949; 
  cursor: pointer; 
  z-index: 5000; 
}

<input type="text" placeholder="Введите язык программирования" id="myInput" onkeyup="visibility(); filterFunction()" autocomplete="off"> 
 
<div id="myDropdown" class="dropdown-content"> 
</div>