Improved versions of classic select inputs.
<infor-select-search id="search" name="search" class="form-control" placeholder="Selecteer status">
<infor-select-option data-name="Actielijst" data-value="actielijst" data-selected>Actielijst</infor-select-option>
<infor-select-option data-name="Lopend" data-value="lopend">Lopend</infor-select-option>
</infor-select-search>
<infor-select-multiple id="multiple" name="multiple" class="form-control" placeholder="Selecteer status">
<infor-select-option data-name="Actielijst" data-value="actielijst">Actielijst</infor-select-option>
<infor-select-option data-name="Lopend" data-value="lopend">Lopend</infor-select-option>
</infor-select-multiple>
<infor-select-edit id="edit" name="edit" class="form-control rounded-pill" placeholder="Selecteer status">
<infor-select-option data-value="actielijst">Actielijst</infor-select-option>
<infor-select-option data-value="lopend">Lopend</infor-select-option>
</infor-select-edit>Adding data-api turns the select into a lazy-loading select. Options are fetched in chunks from the API instead of being declared as static children.
<infor-select-search id="offertes" name="offerte_id" class="form-control" placeholder="Selecteer offerte"
data-api="api/offertes"
data-search-api="api/offertes/search-ids"
data-content="offertenummer"
data-sub-content="naam"
data-value="id"
data-sort-by="offertenummer"
data-sort-type="desc">
</infor-select-search>Static <infor-select-option> children are kept and shown above the fetched options:
<infor-select-search id="offertes-mixed" name="offerte_id" class="form-control" placeholder="Selecteer offerte"
data-api="api/offertes"
data-search-api="api/offertes/search-ids"
data-content="offertenummer"
data-sub-content="naam"
data-value="id"
data-chunk-size="20">
<infor-select-option data-name="Handmatig" data-value="0">Handmatig</infor-select-option>
</infor-select-search>Behavior:
data-chunk-size.data-search-api, which returns an array of ids. Those ids are then posted to data-api, and the returned records are appended to the options (deduped by data-value).Endpoint contracts:
| Endpoint | Request params | Response |
|---|---|---|
data-api |
sort_by, sort_type, offset, limit |
Array of full records |
data-api |
<data-search-key>[] (ids) |
Array of full records for those ids |
data-search-api |
search |
Array of ids |
All requests also include data-params and the csrf token. If data-search-api is omitted, typing in the search box does nothing.
| Attribute | Description | Select | Multiple | Edit | Default |
|---|---|---|---|---|---|
| id | Instance identifier | X | X | X | Random string |
| name | Input name attribute | X | X | X | |
| placeholder | Input placeholder attribute | X | X | X | |
| class | Input styling classes | X | X | X | |
| data-value (prefill) | Prefill a value | X | |||
| data-disabled | Disables the input | X | X | X | |
| data-livewire | Triggers Livewire.emit / Livewire.dispatch on change with value or values as param | X | X | X | |
| data-livewire-params | Optional additional livewire params, syntax: data-livewire-params=":id=5 :name=TEST" |
X | X | X | |
| option class | CSS Classes | X | X | x | |
| option data-name | Name that will be display on select | X | X | ||
| option data-value | Value that will posted | X | X | X | |
| option data-selected | Pre-selects an option | X | X | ||
| option data-params | Appends data elements to the option html element, syntax: data-params=":proces=1" |
X | X | X | |
| option data-locked | Locks the option in the current state | X | |||
| data-api | Enables lazy loading, browse endpoint for chunked fetches | X | |||
| data-search-api | Search endpoint, returns ids that are then fetched via data-api |
X | |||
| data-search-key | Request param name for the ids posted to data-api |
X | ids |
||
| data-value (lazy) | Record column used as option value | X | id |
||
| data-content | Renders option text, see search data-content examples | X | |||
| data-sub-content | Optional secondary line, see search data-content examples | X | |||
| data-chunk-size | Records per browse request | X | 20 |
||
| data-sort-by | Sort column for browse requests | X | |||
| data-sort-type | Sort direction, asc or desc |
X | asc |
||
| data-params | Extra POST params merged into every request, must be a var |
X | |||
| data-errors | Optional callback for handling errors | X |
Place this div inside <infor-select-search>, the content will be appended to the action button
<infor-select-action>
<div onclick="alert('test')">Action Example</div>
</infor-select-action>Place this div inside <infor-select-search>, all attributes will be appended to the hidden input
<infor-select-search-hidden-attr wire:model="role"></infor-select-search-hidden-attr>Use _inforSelectSearch.get(id) to get the instance
| Variable | Parameters | Description |
|---|---|---|
| onchange() | value: string/int |
Triggers on change with selected value as parameter, can be changed like this instance.onchange = value => { console.log(value) } |
| getValue() | Returns currently selected value: {name: "Displayed name", value: "Hidden value"} |
|
| setValue() | value: string/int |
Sets values based on the provided parameter |
| addValue() | options: object (name*, value*, html, params) |
Appends a new value to the select |
| enable() | Enables the input | |
| disable() | Disables the input | |
| clear() | Clears the input |
When lazy loading is enabled the instance keeps the fetched records and pagination state, usable with _inforSelectSearch.get(id):
| Variable | Description |
|---|---|
| records | Array of all fetched records, deduped by data-value |
| offset | Number of records already fetched |
| chunk_size | Records per browse request |
| chunk_loading | Whether a browse chunk is currently being fetched |
| chunk_finished | Whether the browse list is exhausted |
| search_loading | Whether a search request is currently being processed |
Use _inforSelectMultiple.get(id) to get the instance
| Variable | Parameters | Description |
|---|---|---|
| onchange() | values: object[] |
Triggers on change with selected values as parameter, can be changed like this instance.onchange = values => { console.log(values) } |
| onchangeOption() | value: object |
Triggers on change with selected value as parameter, can be changed like this instance.onchangeOption = value => { console.log(value) } |
| getValues() | Returns currently selected options in an array: [{name: "Actielijst", value: "actielijst"}] |
|
| setValues() | values: array, deselect: boolean |
Sets values based on the provided array. Deselects not included options based on deselect parameter, deselects by default |
| addValue() | options: object (name*, value*, html, params, locked, selected) |
Appends a new value to the select. |
| enable() | Enables the input | |
| disable() | Disables the input | |
| clear() | Clears the input |
Use _inforSelectMultiple.get(id) to get the instance
| Variable | Parameters | Description |
|---|---|---|
| onchange() | value: string/int |
Triggers on change with selected value as parameter, can be changed like this instance.onchange = value => { console.log(value) } |
| getValue() | Returns currently selected value: {name: "Displayed name", value: "Hidden value"} |
|
| setValue() | value: string/int |
Sets values based on the provided parameter |
| addValue() | options: object (value*, html, params) |
Appends a new value to the select. |
| enable() | Enables the input | |
| disable() | Disables the input | |
| clear() | Clears the input |