HTML AutoComplete - Simplest JavaScript

Just a few lines, without a framework and regular expression...

Script to end a user-entered word in a text field using the words available in the list.

Autocomplete code exactly 10 lines!

Demonstration

List of words available for demonstration: log, login, logon, logout, logoff, logged...

Clear

Here's the full source code ...

HTML-code

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

JavaScript code

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;
}

Explanations...

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

Each time you type a letter, the check function is called.

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

First, we check if there is a typed word in the list. If so, we display the result.

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

Otherwise, we compare what is typed with the first letters of each word in the list. To do this, we use a filter that selects all words starting with the typed word (the second substr parameter is the letter L, the length of the typed word, not the number 1).

if(tempo.length != 1) return;

The filter returns an array, the tempo. We estimate the number of elements.
If length = 0, no two words begin with the same letters; going out.
If the length is> 1, several words begin with these letters; we also go out for the user to type another letter.

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

If length = 1, only one word in the list starts with the letters entered. Then we end the word in the text box and proceed to the result. For demonstration purposes, we display "found" in the result field, but the use of the result will depend on the intended application of the webmaster...

Example of application? Click the dictionary button in the upper right corner of the page ...

Compatibility with older browsers

The filtering method is implemented in ECMAScript 1.6.
For older browsers, indexOf and filter should be replaced by loops, and it can even be optimized in one loop, as shown below...

Demonstration

Clear

Source code

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;
}

This code is probably slower, which can only be seen with a large list of words... But it works even with all browsers.