Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


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.



  • 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
  • NEW: options.exclude {Function} optional, can exclude items and must return a boolean function(item) { return !== 100 }
  • NEW: options.close {Function} optional, can determine closing of panel
  • NEW: {Boolean} optional, can hiden search field (default: true)

Method: component.hide()


  • 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) {

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