JavaScript autocomplete without external library
Is there a javascript autocomplete library that does not depend on any other libraries?
I am not using jQuery or the likes as I am making a mobile app that I need to keep extra light.
Here is a basic JavaScript example, which could be modified into an autocomplete control:
var people = ['Steven', 'Sean', 'Stefan', 'Sam', 'Nathan'];
function matchPeople(input) {
var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
return people.filter(function(person) {
if (person.match(reg)) {
return person;
}
});
}
function changeInput(val) {
var autoCompleteResult = matchPeople(val);
document.getElementById("result").innerHTML = autoCompleteResult;
}
<input type="text" onkeyup="changeInput(this.value)">
<div id="result"></div>
For anyone looking at this in 2017 onwards who needs a simple solution, you can use HTML5's built-in <datalist>
tag instead of relying on JavaScript.
Example:
<datalist id="languages">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Java">
<option value="Ruby">
<option value="PHP">
<option value="Go">
<option value="Erlang">
<option value="Python">
<option value="C">
<option value="C#">
<option value="C++">
</datalist>
<input type="text" list="languages">
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist