I am trying to implement a tagging system UI almost exactly like the one seen here on meteor forums (with dropdown menu of tags, colored squares, and descriptions) After some googling, I have come to the conclusion that selectize.js (https://brianreavis.github.io/selectize.js/) is one of the richest and most actively managed libraries for accomplishing tagging.
I have tried installing selectize in two ways
- adding the meteor package “jeremy:selectize”
- installing js in client/lib and stylesheets in client/stylesheets (css files) respectively. Neither install allowed me to create custom options.
Right now I am trying to get very basic example working taken directly from the selectize.js docs but the dropdown menu and custom options are never generated.
----------HERE is my implementation in a meteor project----------
//js
Template.hello.onRendered(function(){
$('#select-links').selectize({
maxItems: null,
valueField: 'id',
searchField: 'title',
options: [
{id: 1, title: 'DIY', url: 'https://diy.org'},
{id: 2, title: 'Google', url: 'http://google.com'},
{id: 3, title: 'Yahoo', url: 'http://yahoo.com'},
],
render: {
option: function(data, escape) {
return '<div class="option">' +
'<span class="title">' + escape(data.title) + '</span>' +
'<span class="url">' + escape(data.url) + '</span>' +
'</div>';
},
item: function(data, escape) {
return '<div class="item"><a href="' + escape(data.url) + '">' + escape(data.title) + '</a></div>';
}
},
create: function(input) {
return {
id: 0,
title: input,
url: '#'
};
}
});
});
<!-- html -->
<template name="hello">
<select id="select-links" placeholder="Pick some links..."></select>
</template>