typeahead-tagbox

1.1.5 • Public • Published

typeahead-tagbox

Converts an <input> to a typeahead tagbox. Demos

Basic Usage

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:

<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

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

Readme

Keywords

none

Package Sidebar

Install

npm i typeahead-tagbox

Weekly Downloads

6

Version

1.1.5

License

none

Last publish

Collaborators

  • juliankern