Highlights search terms.
Descends to the text nodes and highlight the found words there. Can be used to hide not matching elements as well, filtering the table by setting appropiate css.
function (list, term)
- list is the element which has sub items to be filtered and highlighted.
- term is the search term, based on which the list will be filtered
The only other requirement is that the sub elements to be filtered
have the class context-search--item
. Only elements below these will
be filtered/highlighted.
.context-search--filtered
: is set on the main list element when there at least one match.context-search--item
: is expected on the items which will be searched.context-search--match
: is set on those .context-search--item which have a match..context-search--highlight
: is the class used for thespan
-Elements which surround found elements.
.context-search--filtered .context-search--item {
display: none;
}
.context-search--item.context-search--match {
display: table-row; // in this example a table is filtered
}
.context-search--highlight {
background-color: yellow;
box-shadow: 0 0 1px 1px yellow;
}