<label for="lf_title"><i>Title</i></label><br><input type="text" name="lf_title" id="lf_title" value="{$link.title}" class="lf_input"><br>
<label for="lf_description"><i>Description</i></label><br><textarea name="lf_description" id="lf_description" rows="4" cols="25">{$link.description}</textarea><br>
<label for="lf_tags"><i>Tags</i></label><br>
- <input type="text" id="lf_tags" name="lf_tags" id="lf_tags" value="{$link.tags}" class="lf_input"
+ <input type="text" name="lf_tags" id="lf_tags" value="{$link.tags}" class="lf_input"
data-list="{loop="$tags"}{$key}, {/loop}" data-multiple autocomplete="off" ><br>
{if="($link_is_new && $GLOBALS['privateLinkByDefault']==true) || $link.private == true"}
<input type="checkbox" checked="checked" name="lf_private" id="lf_private">
{if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn())"}
<script>
$ = Awesomplete.$;
- new Awesomplete($('input[data-multiple]'), {
+ awesomplete = new Awesomplete($('input[data-multiple]'), {
filter: function(text, input) {
return Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]);
},
},
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
+ */
+ var input = document.querySelector('#lf_tags');
+ 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;
+ });
</script>
{/if}
</body>