Dynamic search input
<infor-search
id="adres"
name="adres"
placeholder="Selecteer adres"
class="form-control"
data-all-results="true"
data-content="straat, huisnummer,toevoeging"
data-sub-content="plaats"
data-params="_data.search_params"
data-api="api/search/adres"
data-errors="handleAjaxErrors"
></infor-search>| Attribute | Description | Default |
|---|---|---|
| id | Instance identifier | Random string |
| name | Input name attribute | |
| placeholder | Input placeholder attribute | |
| class | Input styling classes | |
| data-display-prefill | Prefilled display value | |
| data-value-prefill | Prefilled hidden value | |
| data-all-results | Option to select all results as array | false |
| data-content | Results container first text row, see examples below, can also be a function which takes the row as parameter and returns a string | |
| data-sub-content | Results container usb text row, see examples below, can also be a function which takes the row as parameter and returns a string | |
| data-params | Additional data to post, must be a var. In case of typeof function the var will be executed and the result used as parameter. |
|
| data-api | API url, path only. | |
| data-errors | Optional callback for handling errors. | |
| data-livewire | Trigger Livewire.emit on change | |
| data-livewire-params | Optional additional livewire.emit params. Format = ":id=5 :name=TEST" |
//Response examples
[
{id: 255, name: 'Name', lastname: 'Lastname'},
{id: 256, name: null, lastname: 'Lastname'},
] <!--Use coma to seperate object keys-->
<infor-search data-content="naam, lastname"></infor-search>
<!--
1. Name Lastname
2. Lastname
-->
<!--Use || to create options, if the first option is empty it will try the sedonds options etc.-->
<infor-search data-content="naam||lastname"></infor-search>
<!--
1. Name
2. Lastname
-->
<!--Both functions can be used together-->
<infor-search data-content="Name||lastname, id"></infor-search>
<!--
1. Name
2. Lastname 256
-->
<!--Use functions for custom content-->
<infor-search data-content="searchContent"></infor-search>
<script>
function searchContent(row){
return `${row.lastname.slice(0, 3)}...`
}
</script>
<!--
1. Las...
2. Las...
-->
Use _inforSearch.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() | {name: "Displayed name", value: "Hidden value"}` | Sets value |
//Array of objects
[{id: 1, ...} ...]