Contenteditable Input Autocomplete

How it works

Note: bootstrap-contenteditable-autocomplete is tailerod specifically to specifics of contenteditbale tags. It won't work for input or textarea tags.

To initialize the autocomplete behaviour you either call $('#myInput').expandableInputAutocomplete() or set the data-autocomplete-spy attribute on the HTML tag for lazy initialization, e.g.

<span contenteditable data-autocomplete-spy></span>

Either way, the input will be wrapped in an extra tag (same tag name as input), and suggestions will be added if any, the resulting HTML would like like

<span data-autocomplete>
  <span contenteditable></span>
  <div class="suggestions">
    <div>Suggestion 1>/div>
    <div>Suggestion 2>/div>
    <div>Suggestion 3>/div>
  </div>
</span>

Per default, only one value is allowed. To allow multiple values, add the data-autocomplete-multiple property to the tag.

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);
  callback(suggestions);
})

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);
})

Note: This demo is using the Expandable Input plugin for placeholder support in <span contenteditable placeholder="Your name here"> fields.