From b39b1bc2eeebcb52f37f33f63fa645db014130c3 Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Fri, 13 Nov 2015 20:24:12 +0100 Subject: Fixes #360 - Auto-complete more than one tag in tag filter field * Group awesomplete for multi data in a single JS file. * Use it in editlink and linklist. * Move awesomplete JS lib at the end of page in editlink. --- inc/awesomplete-multiple-tags.js | 35 +++++++++++++++++++++++++++++++++++ tpl/editlink.html | 37 +++---------------------------------- tpl/linklist.html | 33 ++++++++++++++++++++++++--------- 3 files changed, 62 insertions(+), 43 deletions(-) create mode 100644 inc/awesomplete-multiple-tags.js diff --git a/inc/awesomplete-multiple-tags.js b/inc/awesomplete-multiple-tags.js new file mode 100644 index 00000000..e0f889b1 --- /dev/null +++ b/inc/awesomplete-multiple-tags.js @@ -0,0 +1,35 @@ +$ = Awesomplete.$; +awesomplete = new Awesomplete($('input[data-multiple]'), { + filter: function(text, input) { + return Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]); + }, + replace: function(text) { + var before = this.input.value.match(/^.+ \s*|/)[0]; + this.input.value = before + text + " "; + }, + minChars: 1 +}); + +/** + * Remove already selected items from autocompletion list. + * HTML list is never updated, so removing a tag will add it back to awesomplete. + * + * FIXME: This a workaround waiting for awesomplete to handle this. + * https://github.com/LeaVerou/awesomplete/issues/16749 + */ +function awesompleteUniqueTag(selector) { + var input = document.querySelector(selector); + input.addEventListener('input', function() + { + proposedTags = input.getAttribute('data-list').replace(/,/g, '').split(' '); + reg = /(\w+) /g; + while((match = reg.exec(input.value)) !== null) { + id = proposedTags.indexOf(match[1]); + if(id != -1 ) { + proposedTags.splice(id, 1); + } + } + + awesomplete.list = proposedTags; + }); +} diff --git a/tpl/editlink.html b/tpl/editlink.html index 889d913d..14a2e6c8 100644 --- a/tpl/editlink.html +++ b/tpl/editlink.html @@ -2,7 +2,6 @@ {include="includes"} - + {/if} diff --git a/tpl/linklist.html b/tpl/linklist.html index 9ed28853..f6e9e82b 100644 --- a/tpl/linklist.html +++ b/tpl/linklist.html @@ -9,12 +9,13 @@ {include="page.header"}