Add suggested tag buttons to tags field (working example)

Kirby 2 Solutions 🎉
1

It would be great to have a way to display “suggested” buttons alongside the tag input field.

I’ve done this in a working, but hacky way - I’m not smart enough to really know what’s going on in the core. It’s working well enough for now but has lots of room for improvement.


(suggestion turns green on cover)


(if empty, hide the whole element. I’m not sure why my gifs are coming out looking like this, but to get the idea)

  1. Add a suggestions: true blueprint option to the tags field, in /panel/app/fields/tags/tags.php 
 // starting from line 25
 $input->data(array(
   'field'     => 'tags',
   'lowercase' => $this->lower ? 'true' : false,
   'separator' => $this->separator,
   'suggestions' => $this->suggestions ? 'true' : false,
 ));
  1. Identify this value in the corresponding /assets/js/tags.js 
var Tags = function(element) {
  // basic elements and stuff
  ...	
  this.lowercase    = this.source.data('lowercase');
  this.separator    = this.source.data('separator');
  this.suggestions  = this.source.data('suggestions');
  1. Add the javascript to populate the element, and insert the tag in the field on a click:
// inside the this.init function
      // add suggested fields
      if (self.suggestions) {
        var suggestions = $('<div class="suggestions"><h3>Suggestions:</h3></div>')
        var values = self.source[0].value.split(self.separator);
        self.element.parent().before(suggestions);
        $.getJSON(self.autocomplete, function(data) {
          console.log(data);
          console.log(values);
          for (var i = data.length - 1; i >= 0; i--) {
            console.log(data[i] + " / " + $.inArray(data[i], values));
            if ($.inArray(data[i], values) == -1) {
              var suggestion = $('<p class="suggestion"></p>')
              var plus = $('<span class="plus">+</span>');
              suggestion.html(data[i]).attr('data-suggestion', data[i]);
              suggestions.append(suggestion);
              suggestion.append(plus);
              suggestion.click(function() {
                self.add($(this).attr('data-suggestion'));
                $(this).hide();
                emptyCheck();
              });
            };
          };
         emptyCheck();
        });
        function emptyCheck() {
          if (suggestions.children(':visible').length === 1) {
           suggestions.hide(); 
          }
        }
      }
  1. A bit of CSS:
}.suggestions {
    padding: .2em;
}
.suggestions h3 {
    display: inline-block;
    margin-right: .5em;
    font-weight: 400;
    font-style: italic;
    color: #777;
}
.suggestion {
    display: inline-block;
    padding: .1em .25em;
    cursor: pointer;
    border: 2px solid #b8b8b8;
    border-radius: 4px;
    border-right-width: 25px;
    position: relative;
    margin-right: .25em;
    transition: .2s;
}
.suggestion:hover {
    border-color: #8dae28;
}
.suggestion .plus {
    position: absolute;
    left: 100%;
    width: 25px;
    text-align: center;
    font-weight: 900;
    color: #fff;
}