Complete Me

Complete Me is a JavaScript library for autocompletes. It can suggest results (rather like Google search). And is DOM friendly - a maximum of 10 results are rendered in the DOM at once.

It doesn’t have any dependencies.

The library can be found on GitHub as can the documentation.

A blog post about building it can be found here.

And some examples can be seen below:

Big thanks to CommuSoft where I built version 0.1.0

Example #1

Result
HTML

<div id="example-one" data-tabindex="1"></div>

JS

// names is an array of 1000 strings

exampleOne = new CompleteMe("#example-one", {
  data: names,
  suggestResult: true,
  canAddNewRecords: true,
  onSelect: function(value) {
    console.log("onSelect " + value);
  },
  onAdd: function(newRecord) {
    console.log("onAdd " + newRecord);
  }
});

Example #2

Result
HTML

<div id="example-two" data-tabindex="2"></div>

JS

// users is an array of 1000 objects

exampleTwo = new CompleteMe("#example-two", {
  data: users,
  suggestResult: true,
  placeholder: "",
  selectedKey: 647,
  onSelect: function(value, key) {
    console.log("onSelect " + key + ": " + value);
  },
  onSuggestionSelected: function(value) {
    console.log("onSuggestionSelected " + value);
  }
});