搜索聯(lián)想建議

1. 基本思路：

當搜索框輸入內(nèi)容的時候，請求加載聯(lián)想建議的數(shù)據(jù)
將請求得到的結果綁定到模板中

2. 基本功能

一、將父組件中搜索框輸入的內(nèi)容傳給聯(lián)想建議子組件

二、在子組件中監(jiān)視搜索框輸入內(nèi)容的變化，如果變化則請求獲取聯(lián)想建議數(shù)據(jù)

三、將獲取到的聯(lián)想建議數(shù)據(jù)展示到列表中

父組件完整代碼：

<template><div class="search-container"><!--搜索欄--><form action="/"><van-search v-model="searchText" @search="onSearch"@focus="isResultShow = false" @cancel="onCancel" show-action placeholder="請輸入搜索關鍵詞" /></form><!--搜索結果--><search-results v-if="isResultShow" /><!--聯(lián)想建議--><search-suggestion v-else-if="searchText" :search-text="searchText"/><!--歷史記錄--><search-history v-else /></div> </template><script> import SearchSuggestion from './components/search-suggestion.vue' import SearchHistory from './components/search-history.vue' import SearchResults from './components/search-results.vue' export default {name: 'SearchIndex',data () {return {searchText: '', // 輸入搜索框的內(nèi)容isResultShow: false // 控制搜索結果的顯示狀態(tài)}},components: {SearchSuggestion,SearchHistory,SearchResults},methods: {onSearch (val) {// 展示搜索結果this.isResultShow = true},onCancel () {this.$router.back()}} } </script><style scoped></style>

子組件完整代碼：

<template><div class="search-suggestion"><van-cell v-for="(str, index) in suggestions":key="index" icon="search" :title="str"></van-cell></div> </template> <script> import { getSearchSuggestions } from '../../../api/search.js' import { debounce } from 'lodash' // /*// 函數(shù)防抖 // const fn = _.debounce(function () { // console.log('hello') // }, 1000) // // fn() // fn() // setTimeout(() => { // fn() // }, 1200) // fn()*/ export default {name: 'SearchSuggestion',data () {return {suggestions: [] // 聯(lián)想建議數(shù)據(jù)列表}},props: {searchText: {type: String,required: true}},watch: {// 屬性名：要監(jiān)視的數(shù)據(jù)的名稱// searchText () {// console.log('je')// }// 監(jiān)視的完整寫法searchText: {// 當數(shù)據(jù)發(fā)生變化則會執(zhí)行 handler處理函數(shù)handler: debounce(async function () {// 發(fā)請求const { data } = await getSearchSuggestions(this.searchText)this.suggestions = data.data.options}, 200),// async handler () {// // 發(fā)請求// const { data } = await getSearchSuggestions(this.searchText)// this.suggestions = data.data.options// },immediate: true // 該回調(diào)將會在偵聽開始之后被立即調(diào)用}} } </script><style scoped></style>

3. 防抖優(yōu)化

loadsh官網(wǎng)
https://www.lodashjs.com/docs/lodash.debounce

1、安裝 lodash

# yarn add lodash npm i lodash

2、防抖處理

// lodash 支持按需加載，有利于打包結果優(yōu)化 import { debounce } from "lodash"

不建議下面這樣使用，因為這樣會加載整個模塊。

import _ from 'lodash' _.debounce() // debounce 函數(shù) // 參數(shù)1：函數(shù) // 參數(shù)2：防抖時間 // 返回值：防抖之后的函數(shù)，和參數(shù)1功能是一樣的 onSearchInput: debounce(async function () {const searchContent = this.searchContentif (!searchContent) {return}// 1. 請求獲取數(shù)據(jù)const { data } = await getSuggestions(searchContent)// 2. 將數(shù)據(jù)添加到組件實例中this.suggestions = data.data.options// 3. 模板綁定 }, 200),

聯(lián)想建議優(yōu)化——高亮搜索關鍵字

如何將字符串中的指定字符在網(wǎng)頁中高亮展示？

"Hello World";

將需要高亮的字符包裹 HTML 標簽，為其單獨設置顏色。

"Hello <span style="color: red">World</span>"

在 Vue 中如何渲染帶有 HTML 標簽的字符串？

data () {return {htmlStr: 'Hello <span style="color: red">World</span>'} } <div>{{ htmlStr }}</div> <div v-html="htmlStr"></div>

如何把字符串中指定字符統(tǒng)一替換為高亮（包裹了 HTML）的字符？

const str = "Hello World"// 結果：<span style="color: red">Hello</span> World "Hello World".replace('Hello', '<span style="color: red">Hello</span>')// 需要注意的是，replace 方法的字符串匹配只能替換第1個滿足的字符 // <span style="color: red">Hello</span> World Hello abc "Hello World Hello abc".replace('Hello', '<span style="color: red">Hello</span>')// 如果想要全文替換，使用正則表達式 // g 全局 // i 忽略大小寫 // <span style="color: red">Hello</span> World <span style="color: red">Hello</span> abc "Hello World Hello abc".replace(/Hello/gi, '<span style="color: red">Hello</span>')

一個小擴展：使用字符串的 split 結合數(shù)組的 join 方法實現(xiàn)高亮

var str = "hello world 你好 hello";// ["", " world 你好 ", ""] const arr = str.split("hello");// "<span>hello</span> world 你好 <span>hello</span>" arr.join("<span>hello</span>");

下面是具體的處理。

1、在 methods 中添加一個方法處理高亮

// 參數(shù) source: 原始字符串 // 參數(shù) keyword: 需要高亮的關鍵詞 // 返回值：替換之后的高亮字符串 highlight (source, keyword) {// /searchContent/ 正則表達式中的一切內(nèi)容都會當做字符串使用// 這里可以 new RegExp 方式根據(jù)字符串創(chuàng)建一個正則表達式// RegExp 是原生 JavaScript 的內(nèi)置構造函數(shù)// 參數(shù)1：字符串，注意，這里不要加 //// 參數(shù)2：匹配模式，g 全局，i 忽略大小寫const reg = new RegExp(keyword, 'gi')return source.replace(reg, `<span style="color: #3296fa">${keyword}</span>`) },

2、然后在聯(lián)想建議列表項中綁定調(diào)用

<!-- 聯(lián)想建議 --> <van-cell-group v-else-if="searchContent"><van-cellicon="search"v-for="(item, index) in suggestions":key="index"@click="onSearch(item)"><div slot="title" v-html="highlight(item, searchContent)"></div></van-cell> </van-cell-group> <!-- /聯(lián)想建議 -->

完整代碼：

<template><div class="search-suggestion"><van-cell v-for="(str, index) in suggestions":key="index" icon="search" ><div slot="title" v-html="hightlight(str)"></div></van-cell></div> </template> <script> import { getSearchSuggestions } from '../../../api/search.js' import { debounce } from 'lodash' // /*// 函數(shù)防抖 // const fn = _.debounce(function () { // console.log('hello') // }, 1000) // // fn() // fn() // setTimeout(() => { // fn() // }, 1200) // fn()*/ export default {name: 'SearchSuggestion',data () {return {suggestions: [] // 聯(lián)想建議數(shù)據(jù)列表}},props: {searchText: {type: String,required: true}},watch: {// 屬性名：要監(jiān)視的數(shù)據(jù)的名稱// searchText () {// console.log('je')// }// 監(jiān)視的完整寫法searchText: {// 當數(shù)據(jù)發(fā)生變化則會執(zhí)行 handler處理函數(shù)handler: debounce(async function () {// 發(fā)請求const { data } = await getSearchSuggestions(this.searchText)this.suggestions = data.data.options}, 200),// async handler () {// // 發(fā)請求// const { data } = await getSearchSuggestions(this.searchText)// this.suggestions = data.data.options// },immediate: true // 該回調(diào)將會在偵聽開始之后被立即調(diào)用}},methods: {hightlight (str) {// RegExp()是正則表達式的構造函數(shù)// 參數(shù)1： 字符串// 參數(shù)2： 匹配模式// 返回值： 正則對象const regStr = new RegExp(this.searchText, 'gi')return str.replace(regStr, `<span style="color: red">${this.searchText}</span>`)}} } </script><style scoped></style>

總結

以上是生活随笔為你收集整理的Vue移动端项目——搜索联想建议功能的实现（结合watch属性和使用lodash防抖节流）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。