# HG changeset patch
# User Guido Berhoerster <guido+booket@berhoerster.name>
# Date 1410287038 -7200
# Node ID 39c95b9826d26a4f639880d030ef93af1f762d0a
# Parent  e78c3356b5853f4b66bc7f83c793b27e4a9af387
Add autocompletion for tags

diff -r e78c3356b585 -r 39c95b9826d2 booket.html
--- 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>
 
diff -r e78c3356b585 -r 39c95b9826d2 booket.js
--- 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,