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,