InforSearch

Dynamic search input


InforSearch@1.0.13.css
searchables.css

- 2023-10-30 09:41:27: LIvewireEmit bugfix

InforSearch@1.0.13-min.css
searchables.css

- 2023-10-30 09:41:27: LIvewireEmit bugfix

InforSearch@1.0.13.js
searchables.js

- 2023-10-30 09:41:27: LIvewireEmit bugfix

InforSearch@1.0.13-min.js
searchables.js

- 2023-10-30 09:41:27: LIvewireEmit bugfix

InforSearch@1.0.12.css
searchables.css

- 2023-10-26 09:36:11: +data-livewire

InforSearch@1.0.12-min.css
searchables.css

- 2023-10-26 09:36:11: +data-livewire

InforSearch@1.0.12.js
searchables.js

- 2023-10-26 09:36:11: +data-livewire

InforSearch@1.0.12-min.js
searchables.js

- 2023-10-26 09:36:11: +data-livewire

InforSearch@1.0.11.css
searchables.css

- 2023-10-26 09:35:32: +data-livewire

InforSearch@1.0.11-min.css
searchables.css

- 2023-10-26 09:35:32: +data-livewire

InforSearch@1.0.11.js
searchables.js

- 2023-10-26 09:35:32: +data-livewire

InforSearch@1.0.11-min.js
searchables.js

- 2023-10-26 09:35:32: +data-livewire

InforSearch@1.0.10.css
searchables.css

- 2023-10-26 09:34:19: +data-livewire

InforSearch@1.0.10-min.css
searchables.css

- 2023-10-26 09:34:19: +data-livewire

InforSearch@1.0.10.js
searchables.js

- 2023-10-26 09:34:19: +data-livewire

InforSearch@1.0.10-min.js
searchables.js

- 2023-10-26 09:34:19: +data-livewire

InforSearch@1.0.9.css
searchables.css

- 2023-10-23 08:36:29: Don't catch err.status 0 errors

InforSearch@1.0.9-min.css
searchables.css

- 2023-10-23 08:36:29: Don't catch err.status 0 errors

InforSearch@1.0.9.js
searchables.js

- 2023-10-23 08:36:29: Don't catch err.status 0 errors

InforSearch@1.0.9-min.js
searchables.js

- 2023-10-23 08:36:29: Don't catch err.status 0 errors

InforSearch@1.0.8.css
searchables.css

- 2023-10-23 08:31:44: err_callback based on location

InforSearch@1.0.8-min.css
searchables.css

- 2023-10-23 08:31:44: err_callback based on location

InforSearch@1.0.8.js
searchables.js

- 2023-10-23 08:31:44: err_callback based on location

InforSearch@1.0.8-min.js
searchables.js

- 2023-10-23 08:31:44: err_callback based on location

InforSearch@1.0.4.css
searchables.css

- 2023-10-19 14:05:22: data-content if statements

InforSearch@1.0.4-min.css
searchables.css

- 2023-10-19 14:05:22: data-content if statements

InforSearch@1.0.4.js
searchables.js

- 2023-10-19 14:05:22: data-content if statements

InforSearch@1.0.4-min.js
searchables.js

- 2023-10-19 14:05:22: data-content if statements

InforSearch@1.0.3.css
searchables.css

- 2023-10-18 07:54:06: Functions renamed

InforSearch@1.0.3-min.css
searchables.css

- 2023-10-18 07:54:06: Functions renamed

InforSearch@1.0.3.js
searchables.js

- 2023-10-18 07:54:06: Functions renamed

InforSearch@1.0.3-min.js
searchables.js

- 2023-10-18 07:54:06: Functions renamed

InforSearch@1.0.2.css
searchables.css

- 2023-10-16 08:17:25: ajax => _ajax

InforSearch@1.0.2-min.css
searchables.css

- 2023-10-16 08:17:25: ajax => _ajax

InforSearch@1.0.2.js
searchables.js

- 2023-10-16 08:17:25: ajax => _ajax

InforSearch@1.0.2-min.js
searchables.js

- 2023-10-16 08:17:25: ajax => _ajax

InforSearch@1.0.1.css
searchables.css

- 2023-10-11 13:06:35: -Search -> +Clear button -Search -> Improved onchange flow

InforSearch@1.0.1-min.css
searchables.css

- 2023-10-11 13:06:35: -Search -> +Clear button -Search -> Improved onchange flow

InforSearch@1.0.1.js
searchables.js

- 2023-10-11 13:06:35: -Search -> +Clear button -Search -> Improved onchange flow

InforSearch@1.0.1-min.js
searchables.js

- 2023-10-11 13:06:35: -Search -> +Clear button -Search -> Improved onchange flow


Dependencies:
Geen dependencies gevonden

README

HTML


<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>

Options

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"

data-content Examples

//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
-->

Instance

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

Expected API Resonse

//Array of objects
[{id: 1, ...} ...]