Автозавершение HTML: простейший код JavaScript

Всего в несколько строк, без фреймворка и регулярного выражения...

Сценарий для завершения слова, вводимого пользователем в текстовое поле, с использованием слов, доступных в списке.

Код автодополнения ровно 10 строк!

Демонстрация

Список слов, доступных для демонстрации: log, login, logon, logout, logoff, logged...

Ясно

Вот полный исходный код...

HTML-код

<input type="text" value="Type a word..." onKeyUp="check(this)" onChange="check(this)">

Код JavaScript

var base= ['log', 'login', 'logon', 'logout', 'logoff', 'logged'];

function check(field) { 
var name = field.value; 
var l = name.length; 
var idx = base.indexOf(name); 
if(idx == -1) { 
var tempo = base.filter(function(x) { 
return x.substr(0, l) == name; 
}); 
if(tempo.length != 1) return; 
name = tempo[0]; 
field.value = name; 
} 
var content = name + " found."; 
document.getElementById("storage").innerHTML=content;
}

Объяснения...

onKeyUp="check(this)" onChange="check(this)"

При каждом наборе буквы вызывается функция проверки.

var idx = base.indexOf(name);
if(idx == -1) {
...
}

Сначала проверяем, есть ли в списке набранное слово. Если это так, выводим результат .

var tempo = base.filter(function(x) {
 return x.substr(0, l) == name;
});

В противном случае мы сравниваем то, что набрано, с первыми буквами каждого слова в списке. Для этого применяем фильтр, который выбирает все слова, начинающиеся с набранного слова (второй параметр substr - буква L, длина набранного слова, а не цифра 1).

if(tempo.length != 1) return;

Фильтр возвращает массив, темп. Оцениваем количество элементов.
Если длина = 0, никакие два слова не начинаются с одинаковых букв; выходим.
Если длина> 1, несколько слов начинаются с этих букв; мы также выходим, чтобы пользователь набирал еще одну букву.

name = tempo[0]; 
field.value = name;

Если длина = 1, только одно слово в списке начинается с введенных букв. Затем мы завершаем слово в текстовом поле и переходим к результату. В демонстрационных целях мы выводим «найдено» в поле результата, но использование результата будет зависеть от предполагаемого приложения веб-мастера...

Пример применения? Нажмите кнопку «словарь» в правом верхнем углу страницы...

Совместимость со старыми браузерами

Метод фильтрации реализован в ECMAScript 1.6.
Для старых браузеров indexOf и filter должны быть заменены циклами, и его даже можно оптимизировать в один цикл, как показано ниже...

Демонстрация

Ясно

Исходный код

function check(field) { 
var name = field.value; 
var l = name.length; 
var last = name; 
function AC_indexOf() 
{ 
var ctr=0; 
for(var i = 0; i < base.length; i++) 
{ 
var next = base[i]; 
if(name==next) return 1; 
if(name==next.substr(0, l)) { last=next; ctr++;}
}
return ctr;
}
var ctr = AC_indexOf();
if(ctr != 1) return;
field.value = last;
var content = last + "found.";
document.getElementById("storage").innerHTML=content;
}

Этот код, наверное, медленнее, что видно только при большом списке слов... Но он работает даже со всеми браузерами.