HTML custom component
input-search
Description
A search input field for easy integration of client or server side custom searches. It standardizes look and behavior within Topincs. It automatically buffers the search calls after keyboard presses, so that it feels right for the user and unnecessary executions of the search function are avoided.
Requires the implementation of a custom search function.
HTML structure
[%<input-search search="search" placeholder="Search for something"></input-search>%]
[%<input-search id="some-id"></input-search>%]
Comments
[%<input-search
search="search"
placeholder="Search for something"
nodes="#result > p">
</input-search>%]
The selected in the attribute %nodes% defines the search space. Each node needs an attribute %data-search%. The search is case sensitive, so lowercasing does the trick.
[%someInputSearch.addEventListener("change", function(event) {
if (event.isDirect()) {
var input = event.currentTarget.value;
...
}
});%]
Listening to the change event is a bit tricky, since the nested HTML input also emits change events, but only if the user commits by pressing the enter key or leaving the field. We can ignore them by using a custom method %isDirect% on native JavaScript Event class.
The change event is emitted buffered. A sequence of keystrokes only emits a single change event once the user stopped typing for 700 ms.
|
Attributes2
| Coding name |
search
|
| Description |
The attribute %search% holds the name of the search function. The search function must be attached to the window object. Within the function 'this' refers to the input element.
|
| Value space |
A JavaScript function name.
|
| Mandatory |
1
|
| Coding name |
placeholder
|
| Value space |
A string instructing the user on what to type in to satisfy the search need.
|
| Mandatory |
0
|
|
We are sorry
This page cannot be displayed in your browser. Use Firefox, Opera, Safari, or Chrome instead.