Un intersante y poco conocido elemento HTML5 es <datalist>, con el cual permite crear de forma nativa un campo de input con autocomplete, y con nativo me refiero sin JavaScript.

datalist

Para utilizarlo, necesitarás un campo de <input /> común y corriente y linkearlo con el listado de palabras/términos a ser desplegados cuando el usuario tipea en este <input />:

<label>Marcas de Cerveza</label>
<input list="cervezas" placeholder="Escribe una marca de cerveza:" />

Ahora construímos el listado con <datalist> y en cada <option> las opciones disponibles:

<datalist id="cervezas">
	<option value="Heineken" />
	<option value="Budweiser" />
	<option value="Skol" />
	<option value="Cristal" />
	<option value="Quilmes" />
	<option value="Estrella Damm" />
	<option value="Sol" />
	<option value="Cusqueña" />
	<option value="Paceña" />
	<option value="Tecate" />
	<option value="Corona" />
	<option value="Águila" />
	<option value="Guinness" />
	<option value="Carlsberg" />
	<option value="Becks" />
	<option value="Brahma" />
	<option value="Polar" />
	<option value="Medalla" />
</datalist>

Ver Ejemplo 1

Nótese que para linkear el <input /> con el <datalist> se utiliza el atributo list=“ID-DEL-DATALIST”. Otro detalle, el autocomplete detecta las primeras letras de la palabra/término definido en cada <option /> y no las letras intermedias que contiene la palabra.

Carga dinámica de datos⌗

Si la lista llega a ser muy extensa, podemos hacer una carga dinámica de las palabras/términos mediante AJAX. Para ello necesitaremos un poco de JavaScript.

Carguemos el listado de países en un campo mientras el usuario está escribiendo en él:

<input id="paises" list="json-paises" placeholder="Escribe el nombre de un país" />
<datalist id="json-paises"></datalist>

JavaScript para llamar el JSON por AJAX y llenar el <datalist> con los países:

// Definición de un par de variables
var dataList = document.querySelector('#json-paises'),
		input = document.querySelector('#paises');
// Creamos un nuevo XMLHttpRequest
var request = new XMLHttpRequest();
// Una ves listo, definimos eventos para sus estados
request.onreadystatechange = function(response) {
  if (request.readyState === 4) {
    if (request.status === 200) {
      // Parseando JSON
      var jsonOptions = JSON.parse(request.responseText);
      // Iterando sobre el arreglo JSON
      jsonOptions.forEach(function(item) {
        // Creando un option por cada país.
        var option = document.createElement('option');
        option.value = item;
        dataList.appendChild(option);
      });
      input.placeholder = "Escribe el nombre de un país";
    } else {
      // Error!
      input.placeholder = "Error al cargar lista de países ;^(";
    }
  }
};
// Cambiamos el texto del placeholder
input.placeholder = "Cargando países";
// Abrimos y enviamos el request
request.open('GET', 'json-paises.json', true);
request.send();

El formato del json-paises.json:

[
	"Afganistán", 
	"Albania", 
	"Alemania", 
	"Andorra", 
	"Angola", 
	"Anguila", 
	"Antigua y Barbuda",
	...
]

Ver Ejemplo 2

Soporte:⌗

Desde IE10, pasando por Firefox, Chrome, Opera, Android Browser y sólo Safari decepcionando.