https://github.com/gr2m/contenteditable-autocomplete
Autocomplete for contenteditable tags
https://github.com/gr2m/contenteditable-autocomplete
Last synced: 7 months ago
JSON representation
Autocomplete for contenteditable tags
- Host: GitHub
- URL: https://github.com/gr2m/contenteditable-autocomplete
- Owner: gr2m
- Created: 2014-03-02T12:55:21.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2021-03-05T06:39:58.000Z (over 5 years ago)
- Last Synced: 2025-04-19T12:12:02.185Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://gr2m.github.io/contenteditable-autocomplete
- Size: 640 KB
- Stars: 12
- Watchers: 4
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# contenteditable-autocomplete
> Add Autocomplete/Typeahead to contenteditable tag
[](https://travis-ci.org/gr2m/contenteditable-autocomplete)
[](https://david-dm.org/gr2m/contenteditable-autocomplete)
[](https://david-dm.org/gr2m/contenteditable-autocomplete#info=devDependencies)
## Download / Installation
You can download the latest JS & CSS code here:
- https://unpkg.com/contenteditable-autocomplete/dist/contenteditable-autocomplete.js
- https://unpkg.com/contenteditable-autocomplete/dist/contenteditable-autocomplete.css
Or install via [npm](https://www.npmjs.com/)
```
npm install --save contenteditable-autocomplete
```
The JS code can be required with
```js
var jQuery = require('jquery')
var contenteditableAutocomplete = require('contenteditable-autocomplete')
// init
contenteditableAutocomplete(jQuery)
```
The CSS code lives at `node_modules/contenteditable-autocomplete/contenteditable-autocomplete.css`
## Usage
```html
Country:
|
Countries:
```
### Suggestions
To pass suggestions for the autocomplete, listen to the `autocomplete:request` event
```js
$('[name=country]').on('autocomplete:request', function(event, query, callback) {
var suggestions = getSuggestionsArrayFor(query);
callback(suggestions);
})
```
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.
```js
$('[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
```bash
git clone git@github.com:gr2m/contenteditable-autocomplete.git
cd contenteditable-autocomplete
npm install
```
## Test
You can start a local dev server with
```bash
npm start
```
Run tests with
```bash
npm test
```
While working on the tests, you can start Selenium / Chrome driver
once, and then tests re-run on each save
```bash
npm run test:mocha:watch
```
## Fine Print
The Expandable Input Plugin have been authored by [Gregor Martynus](https://github.com/gr2m),
proud member of the [Hoodie Community](http://hood.ie/).
License: MIT