# typeahead-tagbox

> A typeahead tagbox with zero dependencies!

Latest version **1.1.5** (published 2017-08-03) · 0 weekly downloads

## Install

```sh
npm install typeahead-tagbox
pnpm add typeahead-tagbox
yarn add typeahead-tagbox
bun add typeahead-tagbox
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2017-08-03 |
| First published | 2017-08-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | juliankern |

## Links

- npm: https://www.npmjs.com/package/typeahead-tagbox
- Repository: https://github.com/juliankern/typeahead-tagbox
- Homepage: https://github.com/juliankern/typeahead-tagbox#readme
- Issues: https://github.com/juliankern/typeahead-tagbox/issues
- npm.io page: https://npm.io/package/typeahead-tagbox

## Dependencies (9)

- [jshint](https://npm.io/package/jshint.md) ^2.9.5
- [babel-cli](https://npm.io/package/babel-cli.md) ^6.24.1
- [gzip-size](https://npm.io/package/gzip-size.md) ^3.0.0
- [node-sass](https://npm.io/package/node-sass.md) ^4.5.3
- [uglify-js](https://npm.io/package/uglify-js.md) ^3.0.27
- [pretty-bytes](https://npm.io/package/pretty-bytes.md) ^2.0.1
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.24.1
- [babel-preset-stage-2](https://npm.io/package/babel-preset-stage-2.md) ^6.24.1
- [babel-plugin-transform-es2015-modules-commonjs](https://npm.io/package/babel-plugin-transform-es2015-modules-commonjs.md) ^6.24.1

## Recent versions

- 1.1.5 (latest) — 2017-08-03
- 1.1.4 — 2017-08-03
- 1.1.3 — 2017-08-03
- 1.1.2 — 2017-08-03
- 1.0.1 — 2017-08-03
- 1.0.0 — 2017-08-01

## README

# typeahead-tagbox
Converts an `<input>` to a typeahead tagbox. [Demos](https://codepen.io/juliankern/pen/GvjxMN)

## Basic Usage
Javascript:
```javascript
typeaheadTagbox({
    data: [
        {"id":1,"text":"Duisburg"},
        {"id":2,"text":"Lagonegro"},
        {"id":3,"text":"Coquimbo"},
        {"id":4,"text":"Kungälv"},
        {"id":5,"text":"Brandenburg"},
        {"id":6,"text":"Salt Lake City"},
        {"id":7,"text":"Pomarolo"},
        {"id":8,"text":"Hanau"},
        {"id":9,"text":"Kampenhout"},
        {"id":10,"text":"Matamata"}
    ]
});
```
HTML:
```HTML
<input type="text" name="tags" class="typeahead-tagbox">
```

## Options
### Basic
Name | default | type | Comment
--- | --- | --- | ---
caseSensitive | `false` | Boolean | If the typeahead should check the text case sensitive or not
data | `[]` | Array | _required_ - The data which should be searched
dropdownItemTemplate | `"{{text}}"` | String | The template for the dropdown item. Possible variables: `{{text}}`, `{{id}}`, and any additional key you add to the data objects
idKey | `"id"` | String | Key of the data objects, by which the data should be sorted. Can be the same es `textKey`, but make sure you have no duplicates then
inputPlaceholder | `"add..."` | String | String for the input placeholder
minLength | `2` | Integer | Number of chars to be typed befor the search starts
selector | `".typeahead-tagbox"` | String | Selector for the to be transformed input element
tagDeleteButtonContent | `"x"` | String | Content of the delete button. May be an image tag or svg icon for example
tagTemplate | `"{{text}}"` | String | The template for the tags. Possible variables: `{{text}}`, `{{id}}`, and any additional key you add to the data objects
textKey | `"text"` | String | Key of the data objects, which should be displayed in the dropdown and tag
### Classes
Name | default | type | Comment
--- | --- | --- | ---
dropdownClass | `"typeahead-dropdown"` | String | The class for the dropdown element
dropdownItemClass | `"typeahead-dropdown-item"` | String | The class for the dropdown item element
dropdownSelectedClass | `"selected"` | String | Class to be added when a dropdown is selected by keyboard arows
highlightClass | `"typeahead-highlight"` | String | Class to be wrapped around the matching substring
inputClass | `"typeahead-input"` | String | Class for the actual input field
tagClass | `"typeahead-tag"` | String | Class for the tags
tagRemovingClass | `"removing"` | String | Class added to the tag befor removing it via keyboard backspace
typeaheadClass | `"typeahead"` | String | Class added to the wrapper of the typeahead

### Callbacks
Name | default | type | Comment
--- | --- | --- | ---
onAddTag | `undefined` | undefined / null / Function | Callback to be executed when a tag is added. Parameters: `tag` which was just added, `taglist` current list of tags, including the new one
onClickDropdownOption | `undefined` | undefined / null / Function | Callback to be extecuted when an dropdown option is clicked. Parameters: `option` which was just clicked. Executed before `onAddTag`.
onOpenDropdown | `undefined` | undefined / null / Function | Callback to be executed when the dropdown is opened to display search results. Parameters: `value` of the input, `optionlist` which is displayed in the dropdown
onRemoveTag | `undefined` | undefined / null / Function | Callback to be executed when a tag is removed. Parameters: `tag` which was removed, `taglist` without the just removed tag

## Examples
### Custom data & dropdown item
```javascript
typeaheadTagbox({
    data: [
        { 
            username: 'jackson', 
            age: 43, 
            id: '5c678gh32', 
            image: 'jackson-avatar.jpg' 
        },
        { 
            username: 'ferdinand', 
            age: 23, 
            id: '5c6jh76a2', 
            image: 'ferdinand-avatar.jpg' 
        },
        /* more data */
    ],
    textKey: 'username'
    dropdownItemTemplate: '<img src="uploads/{{image}}"><strong>{{text}}</strong>({{age}})'
});
```

---
_Source: https://npm.io/package/typeahead-tagbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._