Skip to content
Autocomplete for textarea elements
Branch: master
Clone or download
yuku Merge pull request #157 from julianlam/patch-1
Documentation update: Added pointer to contenteditable Editor
Latest commit cbcd30c Feb 3, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
doc Added pointer to contenteditable Editor Jan 30, 2019
src Merge branch 'master' into auto-placement-for-dropdown Oct 11, 2018
test Add 'auto' placement type.This setting displays dropdown above or bel… Oct 10, 2018
.babelrc Gather all babel config to .babelrc Jul 11, 2017
.codeclimate.yml Update .codeclimate.yml Dec 5, 2017
.editorconfig Add doc files and npm start task Feb 8, 2016
.eslintignore Use karma instead of gulp and jsdom Jun 28, 2016
.eslintrc.yml Update devDependencies except keysim Sep 30, 2017
.flowconfig Update devDependencies Dec 13, 2017
.gitattributes Refactor build tasks Feb 20, 2016
.gitignore Generate gh-pages contents to docs directory Jun 12, 2017
.jsdoc.json Add getting-started and development documents Mar 2, 2016
.npmignore Use karma instead of gulp and jsdom Jun 28, 2016
.travis.yml Don't use Chrome in travis-ci Jul 4, 2017
CHANGELOG.md Merge branch 'master' into auto-placement-for-dropdown Oct 11, 2018
CONTRIBUTING.md Update documents Jun 27, 2016
LICENSE Initial commit Aug 11, 2015
README.md Export `Textarea` and `Textcomplete` from main entry file. Dec 19, 2017
RELEASE.md Update RELEASE.md Sep 24, 2017
inch.json Exclude src/doc from Inch CI Feb 26, 2016
karma.conf.js Gather all babel config to .babelrc Jul 11, 2017
package.json Version 0.17.1 Mar 31, 2018
webpack.config.js Suppress eslint warning Jun 12, 2017
webpack.doc.config.js Use webpack-dev-server Sep 24, 2017
yarn.lock Update devDependencies Dec 13, 2017

README.md

textcomplete

Autocomplete for textarea elements.

NPM version Build Status Code Climate Test Coverage Stable Release Size Analytics

Requirements

Distributed scripts are self-contained.

To require as npm package, textcomplete requires the following to run:

Usage

Textcomplete is easiest to use when installed with npm:

npm install --save textcomplete

Then you can load the module into your code with require call:

var { Textcomplete, Textarea } = require('textcomplete');

The Textarea object is a kind of editor class. An editor encapsulates an HTML element where users input text. The Textarea editor is an editor for textarea element.

You can find some additional editors at List of editors wiki.

The Textcomplete is the core object of textcomplete.

var editor = new Textarea(textareaElement);
var textcomplete = new Textcomplete(editor);

Register series of autocomplete strategies:

textcomplete.register([{
  // Emoji strategy
  match: /(^|\s):(\w+)$/,
  search: function (term, callback) {
    callback(emojies.filter(emoji => { return emoji.startsWith(term); }));
  },
  replace: function (value) {
    return '$1:' + value + ': ';
  }
}, {
  // Another strategy
  ...
}]);

Now, the textcomplete listens keyboard event on the editor and render autocomplete dropdown when one of the strategy matches to the inputted value.

Browser Support

Chrome Firefox Internet Explorer Opera Safari
Current Current 10+ Current Current

Install

If your project is using npm, you can install textcomplete package by npm command:

npm install --save textcomplete

if not, you can download released packages from the release page which contain bundled scripts in dist directory.

Contributing

To contribute to textcomplte, clone this repo locally and commit your code on a separate branch. Please write unit tests for your code, and run the linter before opening a pull-request:

npm test # run linter and all tests

You can find more detail in our contributing guide.

License

The MIT License

You can’t perform that action at this time.