module:holmes
new module:holmes()
search for dom elements on your page
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
options.input |
string |
optional |
'input[type=search]' | A querySelector to find the input |
options.find |
string | A querySelectorAll rule to find each of the find terms |
||
options.placeholder |
string |
optional |
Text to show when there are no results (innerHTML) | |
options.mark |
bool |
optional |
false | Whether to <mark></mark> the matching text
Text to show when there are no results (innerHTML ) |
options.class.visible |
string |
optional |
false | class to add to matched items |
options.class.hidden |
string |
optional |
'hidden' | class to add to non-matched items |
options.dynamic |
boolean |
optional |
false | Whether to query for the content of the elements on every input.
If this is false , then only when initializing the script will
fetch the content of the elements to search in. If this is true
then it will refresh on every input event. |
options.contenteditable |
boolean |
optional |
false | DEPRECATED (now handled automatically) whether the input is a contenteditable or
not. By default it's assumed that it's <input> , true here
will use <div contenteditable> |
options.instant |
boolean |
optional |
false | By default Holmes waits for the DOMContentLoaded event to fire
before listening. This is to make sure that all content is available. However
if you exactly know when all your content is available (ajax, your own event or
other situations), you can put this option on true . |
options.minCharacters |
number |
optional |
0 | The minimum amount of characters to be typed before Holmes starts searching. Beware that this also counts when backspacing. |
options.onHidden |
onChange |
optional |
Callback for when an item is hidden. | |
options.onVisible |
onChange |
optional |
Callback for when an item is visible again. | |
options.onEmpty |
onChange |
optional |
Callback for when no items were found. | |
options.onFound |
onChange |
optional |
Callback for when items are found after being empty. | |
options.onInput |
function |
optional |
Callback for every input. |
Members
elements
elements :NodeList
All of the elements that are searched
Type:
- NodeList
elementsLength
elementsLength :Number
amount of elements to search
Type:
input
input :NodeList
The input element
Type:
- NodeList
options
options :Object
Options
Type:
placeholder
placeholder :Element
Placeholder element
Type:
- Element
searchString
searchString :string
Lowercase string holmes searces for
Type:
Methods
clear
clear()
empty the search string programmatically.
This avoids having to send a new `input` event
count
count() → {object}
Show the amount of elements, and those hidden and visible
Returns:
all matching elements, the amount of hidden and the amount of visible elements
- Type
- object
start
start()
Start an event listener with the specified options
stop
stop() → {Promise}
remove the current event listener
- See:
-
- holmes.prototype.start
Returns:
resolves when the event is removed
- Type
- Promise
inputHandler
(inner) inputHandler()
input event handler
Type Definitions
onChange
onChange(elementopt)
Callback used for changes in item en list states.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
element |
object |
optional |
Element affected by the event. This is the item found by
onVisible and onHidden and the placeholder
(or undefined ) for onEmpty and
onFound . |