Simple Autocomplete JavaScript Library – Complete-Me

Preview:

Description:

Complete-Me is a simple, fast autocomplete library that pops out a Google search-like dropdown list with predefined suggestions when an input field gets focused. Very lightweight, fully customizable and with no dependencies.

How to use it:

Load the complete-me.css in the header of the webpage.

<link href="complete-me.css" rel="stylesheet">

Load the complete-me.js at the bottom of the webpage.

<script src="complete-me.js"></script>

Create a DIV container like this:

<div id="example"></div>

Prepare your autocomplete data.

myData = ["Data 1", "Data 2", "Data 3"];

The JavaScript to render an input field with the autocomplete functionality inside the DIV container.

example = new CompleteMe("#example", {
  data: myData
});

All configuration options and callback functions.

example = new CompleteMe("#example", {
  placeholder: "Type here...",
  noResultsText: "Couldn't find",
  canAddNewRecordsText: "Hit <span class=\"cm-key\">enter</span> to add",
  fetchingMoreResultsText: "Fetching more results...",
  canAddNewRecords: false,
  onAdd: noop,
  onSelect: noop,
  onNoResults: noop,
  onFocussed: noop,
  onBlurred: noop,
  onKeyedDown: noop,
  onKeyedUp: noop,
  onShowSuggestion: noop,
  onClearSuggestion: noop,
  onSuggestionSelected: noop,
  suggestResult: false,
  saveByValue: true
});