diff --git a/README.md b/README.md
index f633e22..67220a7 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# vuepress-plugin-fulltext-search
+# vuepress-plugin-fulltext-highlight-search
Add full-text search capabilities to your [VuePress](https://vuepress.vuejs.org/) website using the
[Flexsearch](https://github.com/nextapps-de/flexsearch) library.
@@ -10,9 +10,9 @@ Many thanks to [Ahmad Mostafa](https://ahmadmostafa.com/2019/12/09/build-better-
First, install plugin.
```bash
-npm i vuepress-plugin-fulltext-search -D
+npm i vuepress-plugin-fulltext-highlight-search -D
# or
-yarn add vuepress-plugin-fulltext-search -D
+yarn add vuepress-plugin-fulltext-highlight-search -D
```
Then, enable the plugin in your `docs/.vuepress/config.js`:
@@ -21,7 +21,7 @@ Then, enable the plugin in your `docs/.vuepress/config.js`:
// docs/.vuepress/config.js
module.exports = {
// ...
- plugins: ['fulltext-search'],
+ plugins: ['fulltext-highlight-search'],
}
```
@@ -90,7 +90,7 @@ const { path } = require('@vuepress/shared-utils')
module.exports = {
plugins: [
[
- 'fulltext-search',
+ 'fulltext-highlight-search',
{
// provide the contents of a JavaScript file
hooks: fs.readFileSync(path.resolve(__dirname, './searchHooks.js')),
@@ -132,7 +132,7 @@ For example:
module.exports = {
plugins: [
[
- 'fulltext-search',
+ 'fulltext-highlight-search',
{
tokenize: 'full',
split: /\s+/,
diff --git a/components/SearchBox.vue b/components/SearchBox.vue
index 2fcc7ab..23ae801 100644
--- a/components/SearchBox.vue
+++ b/components/SearchBox.vue
@@ -61,6 +61,8 @@ export default {
focusIndex: 0,
placeholder: undefined,
suggestions: null,
+ highlightWord:'',
+ lastWord:''
}
},
computed: {
@@ -84,9 +86,30 @@ export default {
},
},
watch: {
- query() {
+ query(val) {
+
this.getSuggestions()
+ if(!this.suggestions?.length && this.lastWord){
+ this.$nextTick(()=>{
+ let target = document.querySelector('.theme-default-content.content__default').innerHTML
+ document.querySelector('.theme-default-content.content__default').innerHTML = target.replace(`${this.lastWord}`,this.lastWord)
+ })
+ }
},
+ $route(to,from){
+ if(this.suggestions?.length && this.highlightWord){
+ let val = this.highlightWord
+ const reg = val?new RegExp(val,'g'):''
+ this.$nextTick(()=>{
+ let target = document.querySelector('.theme-default-content.content__default').innerHTML
+ if( val&® && target) {
+ document.querySelector('.theme-default-content.content__default').innerHTML = target.replace(val,`${val}`)
+ this.lastWord = val // 记录上一次查询词语
+ }
+ });
+ }
+ }
+
},
/* global OPTIONS */
mounted() {
@@ -175,6 +198,8 @@ export default {
}
},
go(i) {
+ // 第i个匹配
+ this.highlightWord = ''
if (!this.showSuggestions) {
return
}
@@ -186,7 +211,10 @@ export default {
window.open(this.suggestions[i].path + this.suggestions[i].slug, '_blank')
} else {
this.$router.push(this.suggestions[i].path + this.suggestions[i].slug)
- this.query = ''
+ const val = this.suggestions[i]?.contentDisplay?.highlightedContent
+ this.highlightWord=val || ''
+
+ // this.query = ''
this.focusIndex = 0
this.focused = false
@@ -231,6 +259,8 @@ function highlight(str, strHighlight) {