Mercurial > projects > booket
changeset 5:39c95b9826d2
Add autocompletion for tags
author | Guido Berhoerster <guido+booket@berhoerster.name> |
---|---|
date | Tue, 09 Sep 2014 20:23:58 +0200 |
parents | e78c3356b585 |
children | e9ad4c625b7a |
files | booket.html booket.js |
diffstat | 2 files changed, 23 insertions(+), 4 deletions(-) [+] |
line wrap: on
line diff
--- a/booket.html Mon Sep 08 20:05:35 2014 +0200 +++ b/booket.html Tue Sep 09 20:23:58 2014 +0200 @@ -34,9 +34,11 @@ <p>Version 1</p> </header> + <datalist id="tag-datalist"></datalist> + <template id="tag-input-template"> <li><label>Tag <input type="text" name="tag" pattern="[^,;]*" - size="20" placeholder="tag"></input> + size="20" list="tag-datalist" placeholder="tag"></input> </label></li> </template>
--- a/booket.js Mon Sep 08 20:05:35 2014 +0200 +++ b/booket.js Tue Sep 09 20:23:58 2014 +0200 @@ -694,6 +694,8 @@ this.tagListElement = document.querySelector('#tags ul.tag-list'); this.tagListElement.addEventListener('click', this); + this.tagDatalistElement = document.querySelector('#tag-datalist'); + this.tagTemplate = document.querySelector('#tag-template'); }; @@ -708,6 +710,9 @@ var i; var referenceTag = ''; var referenceNode; + var tagOptionElement; + var i; + var isInDatalist = false; // create new tag element from template newNode = document.importNode(this.tagTemplate.content, true); @@ -737,6 +742,19 @@ // initialize tag count this.onTagCountChanged(tag, 1); + + // add to datalist + for (i = 0; i < this.tagDatalistElement.options.length; i++) { + if (this.tagDatalistElement.options[i].value == tag) { + isInDatalist = true; + break; + } + } + if (!isInDatalist) { + tagOptionElement = document.createElement('option'); + tagOptionElement.value = tag; + this.tagDatalistElement.appendChild(tagOptionElement); + } }; TagView.prototype.onTagCountChanged = function (tag, tagCount) { @@ -747,11 +765,10 @@ TagView.prototype.onTagDeleted = function (tag) { var tagElement; + // remove from tag list tagElement = this.tagListElement.querySelector('li' + createDatasetSelector('tag', tag)); - if (tagElement !== null) { - tagElement.parentNode.removeChild(tagElement); - } + tagElement.parentNode.removeChild(tagElement); }; TagView.prototype.onFilterTagsSearchChanged = function (filteredBookmarks,