Автозаполнение (живой поиск) JavaScript


Ниже размещён JavaScript - живой поиск (autocomplete) для вывода одного блока с одной подсказкой, при вводе текста в поле input (Editbox). В демо-примере этого скрипта будет использоваться список столиц областных городов России.
Демо-пример (автозаполнение на JavaScript)
Введите в input (Editbox) минимум одну букву.
В HTML-исходнике страницы между тегами <head>, вставьте скрипт:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
var massiv = [
'Майкоп', 'Уфа', 'Улан-Удэ', 'Горно-Алтайск',
'Орел', 'Пенза', 'Пермь', 'Псков', 'Ростов-на-Дону', 'Рязань',
'Самара', 'Саратов', 'Южно-Сахалинск', 'Екатеринбург'
];
    massiv.sort()
  function down(obj) {
    var reg = new RegExp('^' + obj.value, 'i'),
    t = document.getElementById('
podskazka');
    t.innerHTML = '';
    t.style.visibility = "hidden";
    if (obj.value.length > 0)
    for (var i = 0; i < massiv.length; i++) {
    if (reg.test(massiv[i])) {
    t.innerHTML = massiv[i];
    t.style.visibility = "visible";
    break;
        }
    }
}
function copy() {
    var a = document.getElementById('
gorod').value =
document.getElementById('
podskazka').innerHTML;
    document.getElementById('
podskazka').innerHTML = '';
    document.getElementById("
podskazka").style.visibility = "hidden";
}
</script>
В 21-й строке скрипта:
gorod - это id поля input, куда пользователи будут вводить текст.
В строке 8, 22, 23 и 24:
podskazka - это id скрытого слоя (блока), где будет отображаться подсказка.
В 11-й строке if (obj.value.length > 0):
Изменив 0 (ноль) на 1 (один) -- подсказка появится после ввода одной буквы.
Изменив 0 (ноль) на 2 (два) -- подсказка появится после ввода двух букв, и т. д.
Для вызова функции JS необходимо прописать события: 1) oninput="down(this)" -- в теге для input; 2) onclick="copy()" -- в теге для скрытого слоя.
Пример поля input в HTML-коде:
<input id="gorod" name="Столица области РФ" oninput="down(this)">
Пример слоя в HTML-коде:
<div id="podskazka" onclick="copy()"</div>
Используемые стили для input:
#gorod
{
   border: 1px #FFFFFF solid;
   border-radius: 3px;
   background-color: #FFFFFF;
   background-image: none;
   color :#4F4F4F;

   font-family: Arial;
   font-weight: normal;
   font-size: 16px;
   padding: 4px 4px 4px 4px;
   text-align: left;
   vertical-align: middle;

   position: absolute;
   left: 135px;
   top: 94px;
   width: 240px;
   height: 26px;
   line-height: 26px;
   z-index: 5;
   outline: none !important;
}
Используемые стили для скрытого слоя:
#podskazka

   background-color: #FFFFFF;
   border: 1px #FFFFFF solid;
   border-radius: 3px;

    font-family: Arial;
    font-weight: normal;
    text-align: center;
    color: #FF7361;
    font-size: 16px;
    line-height: 1.2;
    margin: 0;

  
visibility: hidden;
   position: absolute;
   padding-top: 7px;
   left: 135px;
   top: 138px;
   width: 248px;
   height: 27px;
   z-index: 9999;
   cursor: pointer !important;
}
Скачать исходник .wbs (версия 12.3.0)
Автозаполнение (живой поиск) cdnjs на jQuery