I am trying to customize UI elements powered by selectize.js, namely I am trying
- to insert a magnifier icon into the search field element to look like this
- Remove the top margin before the first option. I have placed "margin-top:0" in any possible place in my original code, but still with no sucess
Using this jsFiddle, can anyone provide any ideas how to do this ?
Selectize.define('component', function() {
var self = this;
this.on('initialize', function() {
self.open();
});
this.close = (function() {
return function() {};
})();
});
$('.dropdown').each(function() {
$_self = $(this);
$_self.find('select')
.selectize({ plugins: ['component'], maxItems: 1 })
.on('change', function() {
console.log('Changed value to:', $(this).val() )
$_self.find('span.value').text( $(this).val() )
if ($(this).val()) {
$_self.removeClass('open');
}
});
$_self.find('.selectize-control').on('click', function(e) { e.stopPropagation(); })
});
