Make huge <select> elements lighter by caching out all the options to localStorage, and easier to browse with options filtering.

• Loads data as JSON via an XHR call and caches it inside localStorage
• Makes extra XHR calls if queries are over a threshhold value in length
• Filters options via an input element
• Matches option's text
• Matching ignores accented characters
• Sorts matched options
• Highlights query in option's text
• Keyboard navigation works as expected
• Fast

$ npm install @skroutz/selectorablium

or

$ bower install selectorablium

Warning: Bower is deprecated!

• jQuery

Selectorabllium depends on the localStorage object. If localStorage is not supported in the browser, it uses an included shim which does not persist. So if you run it in an old browser, the JSON data will be fetched every time.

Include jQuery, the plugin and its css:

<link rel="stylesheet" href="css/selectorablium.css">
<script src="jquery.js"></script>
<script src="selectorablium.js"></script>

Then initialize the plugin:

<select class="selectorablium" name="my_name"></select>

<script>
  $('.selectorablium').selectorablium({
      app_name: 'my_app', //required, for namespacing purposes
      url: 'some_url',    //required, where the XHR will be fetched from
      query: 'q',         //required, GET param name for the XHR queries
      name: 'shops'       //required, name of specific instance
  })
</script>

The <select> element should include no options.

The plugin can be configured by passing it some options. See next chapter for detailed options listing.

The options can be passed with two ways:

Options object on initialization:

$('.selectorablium').selectorablium({
    app_name: 'my_app',
    url: 'some_url',
    query: 'q',
    name: 'shops',
    default_value: -1,
    default_text: 'some_text'
})

Data-attributes on <select> element:

<select class="selectorablium" name="my_name" data-app_name="test_app" data-url="some_url"></select>

Options passed on initialization have precedence over the data-attribute options.

The response JSON must be an array with objects, with each object having an id and a name key-value:

[{
    "id": "text_or_number1",
    "name":"text_or_number1"
},{
    "id": "text_or_number2",
    "name":"text_or_number2"
}]

On first initialization or when the localStorage needs to be refreshed, an XHR will be made to the url option. The response is expected to be the full list of <option> data.

As the user searches for results by typing a query string on an input, and after the query is longer than the minCharsForRemoteSearch option, an XHR will be made.

If, for example, the url option is 'http://some_url', the query option is 'q', and the query the user has typed in is 'testtest' an XHR will be made to: http://some_url?q=testtest

The instance object of each initialized <select> element can be referenced through .data('Selectorablium'):

var instance = $('.selectorablium').first().data('Selectorablium')

A then method is exposed so that the instance can be seen as a thenable.

The success_callback is executed after:

• the localStorage gets initialized
• any selected_item gets activated.

On error, the error_callback is executed.

Persist to localStorage the passed data. Subsequent searches will find and show that data If value is already present in the localStorage, then the text is not updated.

Manually create an <option> element with the params passed for value and text.

If only the value param is passed, the text is searched in the localStorage.

Reset the <select>'s element option to the default value and text.

Resets the <select> element the the previous state. It completely removes the plugins HTML elements, its internal event handlers and stops any XHR activity.

Just execute

$ grunt publish:<type>

with type being the semver values:

• patch
• minor
• major

Bill Trikalinos (billtrik)

This software is released under the MIT License.