V-search-and-highlight NPM

Vue search and highlight plugin

A Vue plugin for searching the content of an element and highlighting the keyword with the mark element.

The plugin includes a vue directive. It searches the children of the element recursively and replaces the keyword with a mark element.

$ npm i -S v-search-and-highlight

未压缩版本

<script src="https://cdn.jsdelivr.net/npm/v-search-and-highlight@1.1.0/dist/v-search-and-highlight.js"></script>

压缩版本

<script src="https://cdn.jsdelivr.net/npm/v-search-and-highlight@1.1.0/dist/v-search-and-highlight.min.js"></script>

The directive requires the keyword argument and surpports an optional filter function to filter out elements.

Name	Required	Type	Description
keyword	true	String	The keyword to search
filter	false	Function/String	If it is a function, it's the function to filter the elements, take the DOM node as parameter and return `true` for handling the element; If it is a string, it's the class name of for elements to filter out.

There are examples in the examples folder, and you can view them here.

For data binding, we have to use v-text directive other than the mustache syntax.

Because the mustache syntax generates a text node, but this directive replaces text with a html node, which cann't be in a text node.

6 years ago

6 years ago