zelect

$('select').zelect()

It's just yet another <select>.

>>> Example <<<

>>> Download <<<

  • Small, ~ 300 LOC
  • Zero base CSS, roll your own
  • Customizable (well, at least workaroundable)
  • Handles asynchronous paged loading of large option lists (read: AJAX-ready-and-enabled)
  • Initializable in a detached or hidden DOM node
  • Programmatically selectable and changeable
  • Unit-tested
optiondefaulttypeusage
throttle300ms.Delay for throttling keyups for filtering/loading option items based on a search term. 0 makes things synchronous.
loaderundefinedfunction(term, page, callback): Array[Item]Function for loading a pageful of option items. See example
renderItemitem.label || item.toString()function(item, term): String, DOM, jQuery, etc.Function to render a single option item. See example
initialundefineditemInitially selected item
placeholderundefinedString, DOM, jQuery, etcPlaceholder text or HTML to show when no initial selection. The first option item is selected by default if this is left undefined.
noResults"No results for '$query'"function(query): String, DOM, jQuery, etc.Function to render a no-hits text.
regexpMatcher/(^|\s)term/ifunction(term): RegExpFunction to create a RegExp to filter <select>-based options with.

An item is any javascript data structure: String, Object, Array, whatever.

If the option list is known on the client, finite and manageable, use HTML:

<select id="select-backed-zelect">
  <option value="first">First Option</option>
  <option value="second">Another Option</option>
  <option value="third" selected="selected">Third option</option>
</select>
$('#select-backed-zelect').zelect()

If the option list is server-backed, infinite or close to it, use opts.loader:

<select id="async-backed-zelect"></select>
$('#async-backed-zelect').zelect({
  initial: 'Third',
  loaderfunction(termpagecallback) {
    callback(['First for page '+page, 'Second', 'Third'])
  }
})

Callback expects an array. Elements in the array can be anything that renderItem can handle.

zelect will load the next page of results from opts.loader whenever the option list is scrolled to the bottom. It will stop trying to load more once the callback is called with an empty array.

These events are triggered on the <select>-element:

eventargstriggered when
ready-zelect is ready: first results have loaded and the initial selection has been made
changeevent, itemSelected item changed. 2nd parameter is the item itself.

If the zelect is <select>-backed, $('select').val() will return the value of the currently selected option.

$('select').data('zelect-item') will always return the currently selected item.

$('select').zelectItem(myNewItemThatIWantToSelectNow, fireChangeEvent) will do that.

Whether a change event fires can be controlled with the fireChangeEvent boolean. The default is true.

$('select').refreshZelectItem(myUpdatedItem, function(item) { return item._id }) will replace and rerender the item matching myUpdatedItem._id with the new version.

No change events are fired.

$('select').resetZelect() will reset the query to an empty string, load the first results and select the first item.

A change event will fire.

zelect comes with no base css. Make your own.

For inspiration, see an example.

When first rendered, zelect determines the initially selected item in this order:

  1. opts.initial if defined
  2. <option selected="selected"> if opts.loader not defined
  3. Render placeholder text from opts.placeholder if defined
  4. Select the first option from the list
$('select'.zelect({
  renderItemfunction(itemterm) {
    return $('<span>').addClass('my-item').text(item.label).highlight(term)
  }
})

Highlights matches of the search term in the option text, by using e.g. jquery.highlight.js.

$('select'.zelect({
  loaderfunction(termpagecallback) {
    $.get('/search', { query: term, page: page }, function(arrayOfItems) {
      callback(arrayOfItems)
    }
  }
})

Uses a GET to retrieve paged results from a server.

$('select').on('ready', function() { $('form').enable() })
$('select').on('change', function(evtitem) { $('form input.id-container').val(item.id) })
$('select').zelect({
  throttle: 150,
  placeholder: $('<i>').text('Which one...'),
  loader: loader,
  renderItem: renderer,
  noResults: noResultser
}
 
function loader(termpagecallback) {
  $.get('/q', { q:term, p:page }).then(function(items) {
    var result = _(items).map(function(item) {
      return { text:item.content, img:item.imageUrl || 'default.png', id:item.uniqueId }
    }
    callback(result)
  }
}
 
function renderer(itemterm) {
  return $('<div>')
    .append($('<img>').attr('src', item.img))
    .append($('<span>').addClass('content').text(item.label))
}
 
function noResultser(term) {
  return $('<span>').addClass('no-results').text(term + "didn't hit anything.")
}

Enjoy