select

Better select widgets in vanilla javascript.  https://p.ce9e.org/select/demo/
git clone https://git.ce9e.org/select.git

commit
1147a302fd7538ef5a05b8697ffc760b2031d70e
parent
6373195e2444033dd70aa5c96d6398aaebbba87e
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2022-08-31 06:49
tags: allow to use different separators

Diffstat

M README.md 1 -
M demo/index.html 2 +-
M tags.js 3 ++-

3 files changed, 3 insertions, 3 deletions


diff --git a/README.md b/README.md

@@ -26,7 +26,6 @@ use this on desktop.
   26    26 -	dynamic option creation
   27    27 -	localization
   28    28 -	allowClear
   29    -1 -	tokenSeparators
   30    29 
   31    30 ## Inspiration
   32    31 

diff --git a/demo/index.html b/demo/index.html

@@ -275,7 +275,7 @@
  275   275 
  276   276 	<p>The separate file <code>tags.js</code> provides a matching component that allows to enter arbitrary text instead of only the provided options. It combines multi-select with native auto-complete.</p>
  277   277 
  278    -1 	<select multiple data-tags>
   -1   278 	<select multiple data-tags data-tags-separators="Enter ,">
  279   279 		<optgroup label="Alaskan/Hawaiian Time Zone">
  280   280 			<option value="AK">Alaska</option>
  281   281 			<option value="HI">Hawaii</option>

diff --git a/tags.js b/tags.js

@@ -18,6 +18,7 @@ export class TagInput {
   18    18 	constructor(id, original) {
   19    19 		this.id = id;
   20    20 		this.original = original;
   -1    21 		this.separators = (original.dataset.tagsSeparators || 'Enter').split(/\s+/)
   21    22 
   22    23 		this.createElements();
   23    24 		original.hidden = true;
@@ -76,7 +77,7 @@ export class TagInput {
   76    77 					this.input.value = op.value;
   77    78 				}
   78    79 			}
   79    -1 		} else if (event.keyCode === KEYS.ENTER) {
   -1    80 		} else if (this.separators.includes(event.key)) {
   80    81 			if (this.input.value) {
   81    82 				this.onchange(event);
   82    83 			}