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 | |
data-sub-content | Results container sub text row, see Examples below | |
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 _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, ...} ...]