Web component: j-Directory


  • Info
  • HTML
  • JS
  • CSS
  • Meta

j-Directory

It's similar component like j-Suggestion, but has improved design and supports more handy features.

  • singleton
  • works with touches
  • supports dark mode

IMPORTANT: by default this component renders a value as a text from name property.

Methods:

Method: component.show(options)

  • options.element {Element/jQuery Element}
  • options.items {Array/String/Function} a list of items (String type means a link to data-source)
  • options.offsetX {Number} optional, x offset (default: 0)
  • options.offsetY {Number} optional, y offset (default: 0)
  • options.offsetWidth {Number} optional, width offset (default: 0)
  • options.placeholder {String} optional, a placeholder for search field
  • options.render {Function} optional, a function for customized render of item function(item, text) must return HTML
  • options.custom {Boolean} optional, enables returning a value not defined in options.items, default: false
  • options.minwidth {Number} optional, a minimal width, default 200
  • options.maxwidth {Number} optional, a maximal width, default infinite
  • options.callback(selected_item, element) {Function} is triggered when the user clicks on the item
  • options.key {String} optional, a default key for text value (default: name)
  • options.empty {String} optional, adds empty field
  • options.exclude {Function} optional, can exclude items and must return a boolean function(item) { return item.id !== 100 }
  • options.close {Function} optional, can determine closing of panel
  • options.search {Boolean} optional, can hidnen search field (default: true)
  • options.selected {Object} optional, can contain a selected value (default: undefined)
  • NEW: options.align {String} optional, left (default), right or center
  • NEW: options.position {String} optional, top (default), bottom

Method: component.hide()

Configuration:

  • placeholder - a placeholder for the search input

Formatting via Tangular:

var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', template: '<b>{{ name }}</b>' });

Formatting via custom function:

var opt = {};
opt.items = [];
opt.push({ name: 'Total.js' });
opt.push({ name: 'Express.js' });
opt.push({ name: 'Koa.js' });
opt.render = function(item, name) {
    return '<b>' + name + '</b>';
};

Adding of custom class:

var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', classname: 'your_class_name' });

Server-side searching:


var opt = {};

opt.element = your_element;

opt.items = function(search, next) {
    next([{ name: 'Item 1' }, { name: 'Item 2' }]);
};

opt.callback = function(selected) {
    console.log(selected);
};

SETTER('directory', 'show', opt);

Author

Browser‘s Save action performs Preview