怎么样是不是还挺不错的那么这篇文章就讲讲这样一个搜索展示的功能是如何实现的。

代码实现

输入关键字匹配对应的卡片展示匹配的卡片上面要把符合搜索条件的所有词给高亮展示出来不然文本多的时候容易看花了。

点击匹配到的卡片要跳转到卡片的位置并且闪烁两下这样一看就知道要找卡片在哪了。

匹配关键字

我的小程序目前是纯前端搜索的只是目前是这样所以搜索逻辑也是在前端实现。

搜索逻辑如果简单实现的话就是将搜索框的内容与列表中的每一项进行对比看看内容中有没有包含这个字符串的如果有就把这个项给返回回去。

先看代码

cardDataStore.cardBoxList.map((cardBox)

{//

对每个卡片盒子创建一个新对象包含原始属性和修改后的卡片项目return

{...cardBox,//

映射并过滤卡片项目只保留匹配搜索文本的项目cardItems:

cardBox.cardItems.map((cardItem)

{//

searchTextRegex.exec(cardItem.frontContent))

null)

记录每个匹配项的起始和结束索引frontMatches.push({startIndex:

match.index

属性以便重新搜索searchTextRegex.lastIndex

0//

searchTextRegex.exec(cardItem.backContent))

null)

记录每个匹配项的起始和结束索引backMatches.push({startIndex:

match.index

返回一个新的卡片项目对象包含是否匹配和匹配项的位置return

{...cardItem,isMatched,frontMatches,backMatches,}})//

过滤掉没有匹配项目的卡片盒子filteredCards.value

0)}

如果没有搜索文本则清空过滤后的卡片列表filteredCards.value

[]}

通过传入的搜索文本和标志‘giu’创建一个新的正则表达式对象。

g全局搜索标志表示搜索整个字符串中的所有匹配项而不是在找到第一个匹配项后停止。

uUnicode

searchTextRegex.exec(cardItem.frontContent))

null)

searchTextRegex.exec(cardItem.frontContent)

如果找到匹配项exec()

方法返回一个数组其中第一个元素match[0]是找到的匹配文本index

如果没有找到匹配项exec()

在每次循环迭代中都会找到一个匹配项。

startIndex匹配项在

中的结束位置即起始位置加上匹配文本的长度。

frontMatches.push(...)将包含起始和结束索引的对象添加到

frontMatches

经过这么一番操作我们就可以获得一个筛选后的数组其中包含了所有匹配的项每个项还有一个二维数组用来记录匹配位置开头结尾的索引

cardItems:

}[]})[]为什么要大费周章的记录这个索引呢那是因为下一步需要用到接下来说说关键词高亮的展示

关键词高亮

关键词高亮需要在字符串的某几个字符中更改它的样式因此我们上一步才需要记录一下需要高亮的字符串开始和结束的位置如此一来我们做这个高亮的组件就不用再执行一次匹配了。

那么这个样式要如何实现呢我们需要遍历这个字符串在需要高亮的字增加额外的样式最后再重新拼接成一个字符串。

Highlight.vue

flex-wrapviewv-for(charWithStyle,

index)

styledTextclasstext-sm:keyindex:classcharWithStyle.isMatched

text-indigo-500

textArray[arrIndex].lengtharrIndex

1}return

去遍历会把它的结构给拆开最终展示出来的是乱码如果你想正常展示就要用

假设我们打印

.length)console.log(Array.from()[0],

Array.from

正是因为我们第一步中使用正则去匹配字符串的时候是根据表情包字符实际的长度返回的索引值所以我们这里有一个逻辑

let

textArray[arrIndex].lengtharrIndex

1}如果字符的长度大于一我们就从字符串数组中取值这样表情包就能正常展示了然后维护两个索引一个索引给字符长度大于1的字符用一个给字符长度为1的用根据不同的情况取不同的值这样就能处理好表情包的这种情况了。

下面这种很多个表情包的文本也能在正确的位置高亮

请添加图片描述

uni.createSelectorQuery().in(instance.proxy)query.select(#card-box-${props.cardBoxIndex}).boundingClientRect((data)

{return

data}).selectViewport().scrollOffset((data)

{return

{uni.pageScrollTo({scrollTop:data[1].scrollTop

data[0].top

有一个回调可以用于滚动到指定位置后执行某个函数那么我们可以在这里设置触发高亮的动画动画的实现如下

view//...:classcardItemStore.scrollToCardItemId

{animation:

}这里没有使用边框而是使用了内嵌的阴影避免边框会把容器撑大的问题滚动完成后动态给指定元素一个执行动画的

class,动画触发完成后再移除

如果不是遇到了表情包长度问题这个搜索功能的实现还是比较简单的重点是交互和设计是否能够让用户快速定位到想找的内容。

目前是纯前端实现而且涉及了很多遍历性能还有待提升不过先实现再优化了。

学习卡盒已经上线了大家可以直接搜索到这个搜索功能也发版了欢迎体验。