A complement to the jQuery library Chosen that adds ajax autocomplete
This project is no longer maintained and is likely extremely out of date with the original chosen library. There are much better alternatives out there now.
This project is an addition to the excellent Chosen jQuery plugin that makes HTML input forms more friendly. Chosen adds search boxes to
selectHTML elements, so I felt it could use the addition of ajax autocomplete for awesomely dynamic forms.
This script bootstraps the existing Chosen plugin without making any modifications to the original code. Eventually, I would love to see this functionality built-in to the library, but until then, this seems to work pretty well.
This plugin exposes a new jQuery function named
ajaxChosenthat we call on a
selectelement. The first argument consists of the options passed to the jQuery $.ajax function. The
dataparameter is optional, and the
successcallback is also optional.
The second argument is a callback that tells the plugin what HTML
optionelements to make. It is passed the data returned from the ajax call, and you have to return an array of objects for which each item has a
valueproperty corresponding to the HTML
optionelements'
valueattribute, and a
textproperty corresponding to the text to display for each option. In other words:
[{"value": 3, "text": "Ohio"}]
becomes:
Ohio
or for grouping:
[{ group: true, text: "Europe", items: [ { "value": "10", "text": "Stockholm" }, { "value": "23", "text": "London" } ] }, { group: true, text: "Asia", items: [ { "value": "36", "text": "Beijing" }, { "value": "20", "text": "Tokyo" } ] }]
becomes:
Stockholm London Beijing Tokyo
Note:
Due to a bug in Chosen, it is necessary to change
choosen.css.
Add
display: list-item;
to
.chzn-container .chzn-results .group-result {
class
There are some additional ajax-chosen specific options you can pass into the first argument to control its behavior.
minTermLength: minimum number of characters that must be typed before an ajax call is fired
afterTypeDelay: how many milliseconds to wait after typing stops to fire the ajax call
jsonTermKey: the ajax request key to use for the search query (defaults to
term)
$("#example-input").ajaxChosen({ type: 'GET', url: '/ajax-chosen/data.php', dataType: 'json' }, function (data) { var results = [];$.each(data, function (i, val) { results.push({ value: val.value, text: val.text }); }); return results;
});
To have the results grouped in
optgroupelements, have the function return a list of group objects instead:
$("#example-input").ajaxChosen({ type: 'GET', url: '/ajax-chosen/grouped.php', dataType: 'json' }, function (data) { var results = [];$.each(data, function (i, val) { var group = { // here's a group object: group: true, text: val.name, // label for the group items: [] // individual options within the group }; $.each(val.items, function (i1, val1) { group.items.push({value: val1.value, text: val1.text}); }); results.push(group); }); return results;
});
In order to install development dependencies, you can run in the ajax-chosen directory:
npm install -d
ajax-chosen is written in Coffeescript, so there is a Cakefile provided that will perform all necessary tasks for you. Simply run
caketo see all available commands.