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.
Name | Required | Value | Default | Description |
---|---|---|---|---|
app_name | yes | string | - | The name of the app. It is used for namespacing the data inside the localStorage. |
url | yes | string | - | The url where the XHRs will point to. |
query | yes | string | - | the GET param key for the query URL. |
name | yes | string | - | the name of the specific Selectorablium instance. It is used for namespacing the data inside the localStorage. |
default_value | no | string|number | 0 | The value for the default <option> . |
default_text | no | string|number | 'Please select an option' | The text for the default <option> . |
selected_id | no | string|number | null | On initialization, search the localStorage and create an <option> with this as value and the text the localStorage returns. |
minCharsForRemoteSearch | no | number | 3 | When the query is longer than this number make query XHRs. |
localCacheTimeout | no | number | 604800000 (one week) | Milliseconds after which the localStorage is considered as invalid and needs refreshing. |
XHRTimeout | no | number | 650 | Milliseconds to wait before making an XHR query call. |
maxResultsNum | no | number | 10 | The number of results printed |
list_of_replacable_chars | no | array | [['ά', 'α'],...] | An array with accented characters and their unaccented counterpart. This is used to make smart matching on accented names even if non accented characters are used in the query |
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.