This is no longer maintained.
Please consider using d1-web instead.
Add-on for d1.
Autocomplete lookups with data from XHTTP request.
Demo & docs
npm install d1lookup
On page load call:
d1lookup.init(options);
In your markup:
- Add
data-lookup
attribute with value that is data source URL to load autocomplete data. URL should have{q}
substring that will be replaced with search string. - Add
data-label
attribute with label for initial value. - Add
data-cache
attribute to set limit of cached responses from data source. By default cache is not used. - Add
data-url
attribute to add link to selected resource. URL should have{id}
substring that will be replaced with identifier of selected resource. - Add
data-goto
attribute to go to specified URL on item selection. URL may have{id}
substring that will be replaced with identifier of selected resource.
<input type="text" name="id" value="1"
data-lookup="?table=users&q={q}"
data-label="User One"
data-cache="10"
data-url="/users/{id}"
data-goto="/users/{id}">
Input attribute, containing URL to visit on item selection, with optional {id}
substring.
Default: "data-goto"
Input attribute, containing label for initial input value.
Default: "data-label"
Input attribute, containing data source URL with {q}
substring.
Default: "data-lookup"
Input attribute, containing link to selected resource with {id}
substring.
Default: "data-url"
Limit of cached responses from data source.
Default: 0
Icon to show after input as a link to selected resource.
Default: "edit"
Id
of popup list element containing found autocomplete options.
Default: "lookup-list"
Maximum options to show.
Default: 10
Timeout before actual request after search string input, ms.
Default: 300
- IE 10+
- Latest Stable: Chrome, Firefox, Opera, Safari