Bootstrap Tag Autocomplete

This is a bootstrap plugin to autocomplete tags for contenteditable div elements. It works in the same way tagging people on Facebook, Twitter or Sandglaz works. By default, it triggers autocompletion as you type @.

Demo

Features

• It will autocomplete for multiple tags.
• It updates the caret position as you select tags.
• The content editable div may contain multiple html nodes. Caret position will still update correctly.
• It's customizable through passing options

Usage

1. Link to the JavaScript dependencies.

          <script src="jquery.js"></script>
          <script src="deps/bootstrap-typeahead.js></script>
          <script src="deps/rangy-core.js></script>
          <script src="deps/caret-position.js></script>
          <script src="bootstrap-tagautocomplete.js"></script>
          

You can find these files at https://github.com/Sandglaz/bootstrap-tagautocomplete/tree/master/deps. Note the version of bootstrap-typeahead.js used is from this fork. It's updated to work on contenteditable divs, and has not been pulled in yet.

2. Create a ContentEditable div and initialize it.

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

            $('div#example').tagautocomplete({
              source: ['@ann', '@bill', '@casey']
            });
          

Options

            $('div#example').tagautocomplete({
              source: ['@ann', '@bill', '@casey', '#work', '#finance', '#home'],
              character: '@#', //accept both @ and #
              after: function () {} //to run after selection  
            });
          

It also accepts bootstrap-typeahead's options: items, updater, matcher, highlighter and sorter.

Contributing

Bug reports and pull requests are welcomed! If your pull request contains JavaScript patches or features, you must include relevant unit tests.

License

Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0.