projects/booket

changeset 5:39c95b9826d2

Add autocompletion for tags
author Guido Berhoerster <guido+booket@berhoerster.name>
date Tue Sep 09 20:23:58 2014 +0200 (2014-09-09)
parents e78c3356b585
children e9ad4c625b7a
files booket.html booket.js
line diff
     1.1 --- a/booket.html	Mon Sep 08 20:05:35 2014 +0200
     1.2 +++ b/booket.html	Tue Sep 09 20:23:58 2014 +0200
     1.3 @@ -34,9 +34,11 @@
     1.4      <p>Version 1</p>
     1.5    </header>
     1.6  
     1.7 +  <datalist id="tag-datalist"></datalist>
     1.8 +
     1.9    <template id="tag-input-template">
    1.10      <li><label>Tag <input type="text" name="tag" pattern="[^,;]*"
    1.11 -    size="20" placeholder="tag"></input>
    1.12 +    size="20" list="tag-datalist" placeholder="tag"></input>
    1.13      </label></li>
    1.14    </template>
    1.15  
     2.1 --- a/booket.js	Mon Sep 08 20:05:35 2014 +0200
     2.2 +++ b/booket.js	Tue Sep 09 20:23:58 2014 +0200
     2.3 @@ -694,6 +694,8 @@
     2.4      this.tagListElement = document.querySelector('#tags ul.tag-list');
     2.5      this.tagListElement.addEventListener('click', this);
     2.6  
     2.7 +    this.tagDatalistElement = document.querySelector('#tag-datalist');
     2.8 +
     2.9      this.tagTemplate = document.querySelector('#tag-template');
    2.10  };
    2.11  
    2.12 @@ -708,6 +710,9 @@
    2.13      var i;
    2.14      var referenceTag = '';
    2.15      var referenceNode;
    2.16 +    var tagOptionElement;
    2.17 +    var i;
    2.18 +    var isInDatalist = false;
    2.19  
    2.20      // create new tag element from template
    2.21      newNode = document.importNode(this.tagTemplate.content, true);
    2.22 @@ -737,6 +742,19 @@
    2.23  
    2.24      // initialize tag count
    2.25      this.onTagCountChanged(tag, 1);
    2.26 +
    2.27 +    // add to datalist
    2.28 +    for (i = 0; i < this.tagDatalistElement.options.length; i++) {
    2.29 +        if (this.tagDatalistElement.options[i].value == tag) {
    2.30 +            isInDatalist = true;
    2.31 +            break;
    2.32 +        }
    2.33 +    }
    2.34 +    if (!isInDatalist) {
    2.35 +        tagOptionElement = document.createElement('option');
    2.36 +        tagOptionElement.value = tag;
    2.37 +        this.tagDatalistElement.appendChild(tagOptionElement);
    2.38 +    }
    2.39  };
    2.40  
    2.41  TagView.prototype.onTagCountChanged = function (tag, tagCount) {
    2.42 @@ -747,11 +765,10 @@
    2.43  TagView.prototype.onTagDeleted = function (tag) {
    2.44      var tagElement;
    2.45  
    2.46 +    // remove from tag list
    2.47      tagElement = this.tagListElement.querySelector('li' +
    2.48          createDatasetSelector('tag', tag));
    2.49 -    if (tagElement !== null) {
    2.50 -        tagElement.parentNode.removeChild(tagElement);
    2.51 -    }
    2.52 +    tagElement.parentNode.removeChild(tagElement);
    2.53  };
    2.54  
    2.55  TagView.prototype.onFilterTagsSearchChanged = function (filteredBookmarks,