Remote Search Integration
Chosen keeps the native <select> as the source of form values. For a large collection, search on your server and add only a bounded page of matches to the select. Keep selected <option> elements when replacing results, even if the latest page does not contain them.
Try the working examples in the jQuery, Prototype, Vanilla, and React demos. They simulate an asynchronous provider, retain selected native values, and ignore stale responses.
Return a small page of records with stable, unique string values and labels:
[{"value":"beacon","label":"Beacon"},{"value":"ember","label":"Ember"}]Search and cap results on the server. The demos show up to six records, wait for two search characters, and use a 150 ms search delay. Do not load the entire collection into the browser.
The complete recipe explains the five-argument demo helper, a fetch provider, and the event or refresh call for each edition. The helper in remote-demo.js is application example code, not a new Chosen package API. Adapt it to your endpoint, validate response records, render labels as text, and handle errors.
| Edition | Search notification | Refresh results |
|---|---|---|
| jQuery |
chosen:search_updated, data.search_term
|
$(select).trigger('chosen:updated') |
| Prototype |
chosen:search_updated, event.memo.search_term
|
select.fire('chosen:updated') |
| Vanilla |
chosen:search_updated, event.detail.search_term
|
chosen.update() |
| React | onSearchUpdated(query) |
Update the options prop and retain selected values in the controlled value prop |
Free-text creation is a separate opt-in feature. This recipe does not add a built-in remote-source option or virtualize a populated select. Those remain open design questions in Harvest #79 and fork PR #209.