Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to achieve the highlight of WeChat Mini Programs search keywords". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

When a demand is encountered in the project, WeChat Mini Programs searches for data and keywords should be highlighted, and when receiving the demand, start working immediately. Put up the effect picture first.

2, thinking

The first thing the blogger thinks of is to use split to process the data returned by the background according to the search keywords, and then indexOf finds the keywords and adds a deep field to each word. If deep is true, it will be highlighted and false will be normal. Because it is Mini Program, so the landlord directly made a highlight component, the code is very simple, the implementation steps are as follows.

3, code logic

The simulation data are as follows

List: ['Wuhan University', 'Huazhong University of Science and Technology', 'Central China normal University', 'Central South University of Economics and Law', 'China University of Geosciences', 'Wuhan University of Technology', 'Huazhong University of Science and Technology',]

An empty array is defined in data to store the data filtered according to the search key

FilterList: [], / / filtered

Wxml and method of search

/ / wxml / / search method searchValue (e) {let val = e.detail.value; this.setData ({value:val}) if (val.length > 0) {this.setData ({filterList: []}) let arr = []; for (let I = 0Traci

< this.data.list.length;i++){ if(this.data.list[i].indexOf(val) >

-1) {arr.push (this.data.list [I])} this.setData ({filterList: arr})} else {this.setData ({filterList: []})}}

Defines a highlight component highlight

"usingComponents": {"highlight": ".. /.. / components/highlight/highlight"}

Pass each searched item and key parameter to the component on the page

Receive in component

Properties: {text:String, key: {type:String, value:'', observer:'_changeText'}}

Initial data of the component

Data: {highlightList: [], / / processed data}

Wxml of the component

{{item.val}}

Highlight data processing of component

/ / non-empty filter _ changeText (e) {if (e.length > 0 & & this.properties.text.indexOf (e) >-1) {this._filterHighlight (this.properties.text, e);}}, / * keyword highlighting processing * @ param {String} text-text * @ param {String} key-keyword * / _ filterHighlight (text, key) {let textList = text.split ("") Let keyList = key.split (""); let list = []; for (let I = 0 [I)

< textList.length;i++){ let obj = { deep:false, val:textList[i] } list.push(obj); }; for(let k = 0;k < keyList.length;k++){ list.forEach(item =>

{if (item.val = keyList [k]) {item.deep = true;}})} this.setData ({highlightList:list})} "how to achieve the highlight of WeChat Mini Programs search keywords" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.