Simple Autocomplete JS library For Input Field – autoCompltr.js

Preview:

Description:

autoCompltr.js is an easy-to-use Javascript library which transforms a DIV element into an input field with autocomplete function. Enter a character into the input field and you’ll see the list populate with suggestions.

How to use it:

Include the required CSS and JavaScript into the document.

<link rel="stylesheet" href="css/autoCompltr.css">
<script src="js/autoCompltr.js"></script>

Create an empty DIV element on the document.

<div id="auto-complete"></div>

Create a list of data for the autocomplete.

var list = [
  "Hewitt",
  "Carter",
  "Murray",
  "Golden",
  "Fowler",
  "Riggs",
  "Bowers",
  "Bartlett",
  "Howard",
  "Lancaster",
  "Steele",
  "Kaufman",
  "Reed",
  "Schwartz",
  "Rose",
  "Sullivan",
  "Payne",
  "Ewing",
  "Nicholson",
  "Mathis",
  "Reid",
  "Velez",
  "Rasmussen",
  "Avila",
  "Ayers",
  "Lowe",
  "Cobb",
  "Noble",
  "Woodard",
  "Jarvis",
  "Dyer",
  "Little"
];

Enable the autocomplete function on the input filed.

var autoCompltrDOM = document.getElementById('auto-complete');
var autoCompltr = new AutoCompltr(autoCompltrDOM);
autoCompltr.setSuggestionsList(list);

Changelog:

09/09/2015

• Update