ImsKeywordBox demo & docs
Vue.js keyword/tag editor component
GitHub

Properties

value Current value of input (v-model). Array of strings or null {{keywords}}
showDeleteButton Show button (×) to delete keyword. Boolean
separator Symbol between keywords. String or Object

If object provided it can has following fields:

  • text separator character(s). String
  • before put separator before keyword. Default false. Boolean
  • inside put separator inside keyword. Default false. Boolean
  • first different separator for first keyword. String
  • between when `separator.inside` is true allow to specify characters between keywords. String

Tip: to put each keyword on its own line, set '\r\n' as the separator value

Presets:
splittingRegexp RegExp to split entered or pasted text. RegExp

Note: if null provided, entered text will be not splitted automatically, but you can provide your own splitting logic using `preprocessKeyword` property
preprocessKeyword Allows to specify the function that will change the entered keywords before emitting new value. Function

  • (string keyword) => string: receives original keyword and returns the transformed one. If function returns empty keyword, it will be not added
  • (string keyword) => string[]: receives original keyword, returns an array of keywords that should be inserted instead of it

Note: this affects only new entered/pasted text 		{{displayFunc(preprocessKeyword)}}
getKeywordClasses Allows to set CSS-classes for keywords. Function

  • (string keyword, number keyword_index) => string | string[] | object: receives keyword and its index. Should return CSS-classes for that keyword: single class, array of classes or object where keys are classes and values should be true to add corresponding class
{{displayFunc(getKeywordClasses)}}
scrollY Allows to control vertical scroll position. You can set and get value (using `scroll-y.sync`). Number

handleExceptions Allows to set handler for unhandled exceptions. Function

  • (Error error) => boolean: should return true if exceptions is handled
Will output to the console by default
emitValueEvent Allow to change the name of event that will be emitted when user changes value Function `input` by default
customizeMultiKeyword­DraggingCanvas Allow to customize drag image for multi keyword dragging. Function

  • (Canvas canvas, string[] dragging_keywords) => void
-
historyController Allow to customize undo/redo handling. HistoryController -

Methods

focus() Make component focused
selectAll() Select all keywords
setCursorPosition(keyword_index, after) Set cursor position before or after specified keyword index

  • keyword_index - keyword index. Number
  • after - set cursor after or before specified keyword. Boolean
deleteSelectedKeywords(emit = true) Delete selected keywords

  • emit - emit value after deletion. Boolean
getSelectionsAsJoinedString() Return selected keywords as joined string