The simplest autocomplete code in JavaScript

In a few lines, without a framework or regular expression... A script to complete a word that the user wants to enter in a text field from the available words in a list.

The code of autocomplete is exactly 10 lines!

Demonstration

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

Clear

Here is the complete 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 a letter is typed, the check function is called.

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

We look first if the typed word is in the list. If this is the case, the result is displayed.

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 apply a filter that selects all words that begin with the typed word (The second parameter of substr is the letter L, the length of the typed word, not the number 1).

if(tempo.length != 1) return;

The filter returns an array, tempo. The number of elements is evaluated.
If length = 0, no word begins with the same letters than the typed word, we leave.
If length > 1, several words start with these letters then we leave too to let the user type a letter more.

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

When length = 1, one word only in the list begins with the letters entered, then we complete the word in the text field, and go to the result. In the demonstration we display "found" in the result field, but the use of the result will depend on the application that the webmaster wants to do ...

An example of application? Click the "dictionary" button at the top right of the page ...

Compatibility with older browsers

The filter method is implemented in ECMAScript 1.6.
For old browsers, we must replace indexOf and filter by loops and even optimize it in a single loop, here is the demo...

Demonstration

Clear

Code source

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 will appear only with a big list of words... But it works with all browsers.