Autocomplete for contenteditable tags
JavaScript HTML CSS
Failed to load latest commit information.
bin feat: initial version Feb 10, 2016
.gitignore chore(gitignore): initial version Feb 10, 2016
.travis.yml chore(travis): test matrix & e2e tests Feb 10, 2016
contenteditable-autocomplete.css chore: removed bootstrap- from file names Feb 10, 2016
contenteditable-autocomplete.js chore: removed bootstrap- from file names Feb 10, 2016


Add Autocomplete/Typeahead to contenteditable tag

Build Status Dependency Status devDependency Status

Download / Installation

You can download the latest JS & CSS code here:

Or install via npm

npm install --save contenteditable-autocomplete

The JS code can be required with

var jQuery = require('jquery')
var contenteditableAutocomplete = require('contenteditable-autocomplete')

// init

The CSS code lives at node_modules/contenteditable-autocomplete/contenteditable-autocomplete.css


<!-- load jquery -->
<script src="jquery.js"></script>

<!-- load contenteditable-autocomplete assets -->
<link rel="stylesheet" type="text/css" href="contenteditable-autocomplete.css">
<script src="contenteditable-autocomplete.js"></script>

<!-- The behaviour is initialzied on first interaction -->
  <span contenteditable name="country" placeholder="set country" data-autocomplete-spy></span> |

<p contenteditable name="countries" placeholder="set countries" data-autocomplete-spy data-autocomplete-multiple></p>


To pass suggestions for the autocomplete, listen to the autocomplete:request event

$('[name=country]').on('autocomplete:request', function(event, query, callback) {
  var suggestions = getSuggestionsArrayFor(query);

Instead of strings, you can also pass objects with the mandatory properties label and value. label will be shown as suggestions. When selected, value will be added to the input.

$('[name=country]').on('autocomplete:request', function(event, query, callback) { callback([ {label: 'Germany (Europe)', value: 'Germany'}, {label: 'Thailand (Asia)', value: 'Thailand'}, {label: 'Uruguay (South America)', value: 'Uruguay'} ]); })

Select event

To react on when a suggestion has been selected, listen to the autocomplete:select event.

$('[name=country]').on('autocomplete:select', function(event, selected) {
  console.log('selected item:', selected);

Selected is always an object with label and value properties (see above). Additional properties passed to suggestions will be passed.

Local Setup

git clone
cd contenteditable-autocomplete
npm install


You can start a local dev server with

npm start

Run tests with

npm test

While working on the tests, you can start Selenium / Chrome driver once, and then tests re-run on each save

npm run test:mocha:watch

Fine Print

The Expandable Input Plugin have been authored by Gregor Martynus, proud member of the Hoodie Community.

License: MIT