摘要：项目需求是通过搜索关键字显示符合搜索条件的用户，搜索条件是用户昵称和用户唯一号码是一串数字，其中昵称支持中文匹配和首字母拼音匹配。
项目需求是通过搜索关键字显示符合搜索条件的用户，搜索条件是用户昵称和用户唯一号码（是一串数字），其中昵称支持中文匹配和首字母拼音匹配。
首先说说自己的想法：
1.既然要支持拼音搜索那么必须要一个能把中文转化成拼音的东西（我是在网上找的大佬的代码，一般像这种js都是比较大的，。。。没有办法字符太多）
2.搜索内容符合昵称和唯一号需要分开判断
开始：
假如本地数组是arr1 [
{
name:"张三",
id:0001
....
},
{
name:"李四",
id:0002
....
},
{
name:"王五",
id:0003
....
}
...
]
1.因为是使用本地搜索（这里是一个数组对象），并且要高亮必然要涉及到修改字段，这里提供一个深克隆数组的方法
var deepCopy = function(o){
if (o instanceof Array) {
var n = [];
for (var i = 0; i < o.length; ++i) {
n[i] = deepCopy(o[i]);
}
return n;
} else if (o instanceof Object) {
var n = {}
for (var i in o) {
n[i] = deepCopy(o[i]);
}
return n;
} else {
return o;
}
}
2.需要使用转拼音的js为 arr中每一项添加一个保存对应简拼的字段，我这里叫spelling,我这里全部转为大写，
此时arr应该是这个样子 [
{
name:"张三",
id:0001,
spelling:"ZS"
....
},
{
name:"李四",
id:0002,
spelling:"LS"
....
},
{
name:"王五",
id:0003,
spelling:"WW"
....
}
...
]
3.全局声明一个数组 var arr1 = []用来保存匹配项
4.这里提供一个获取匹配内容开始的位置的方法 只返回第一次匹配上的位置
var getStartIndex = function(val,inputStr){
var result
var reg1=new RegExp(val,"ig");
reg1.lastIndex=0;
if((result = reg1.exec(inputStr)) != null){
var lIndex=reg1.lastIndex-result[0].length;
return lIndex
}
}
例子：在ABCD中匹配 a或者A getStartIndex("a","ABCD")//0；getStartIndex("aB","ABCD")//0;getStartIndex("c","ABCD")//2
5.利用正则匹配输入内容和要比对的字段
var newArr = deepCopy (arr)//深拷贝本地数组
var reg = new RegExp(val.trim().toUpperCase())//val是你输入的内容
newArr .map(function(item){
if(item.name.match(reg)||(item.id+"").match(reg)||(item.spelling).match(reg)){
//这里姓名id简拼任何一项匹配成功就将此项加入到arr1中
var keyWord = (item.name).replace(/[s]+/g," ")//name字段去掉空格
var keyId = (item.id+"").replace(/[s]+/g," ");//id字段去掉空格
var rex = new RegExp(val.trim(),"i");
if(item.name.match(reg)){//中文匹配成功的情况直接将输入内容替换成一个span标签包住并给个红色
item.name = keyWord.replace(rex,`${rex.exec(keyWord)}`)
}else if((item.spelling+"").match(reg)){//简拼匹配成功时
var index = getStartIndex(val.trim(),item.spelling)-1
for(let j = 0;j${showContent}`)
}else if(item.id +"").match(reg)){
item.id = keyId.replace(rex, `${content}`)
}
arr1.push(item)
}
})
至于为什么要先判断匹配上用户名在判断匹配id 是因为产品的需求问题，之后拿到arr1就可以渲染页面；
6.总结
我的代码是封装了一个方法的因为我的项目还有其他需求比较麻烦比如按产品规则排序什么还有其他比较多又杂，就不贴出我的代码了，我写这些主要是提供一个思路，我主要是想记录两个方法，一个是深拷贝数组和获取匹配开始的index的方法。还有全拼+简拼匹配什么的 以后有时间来实现吧 单纯想了一下感觉很麻烦，另外转拼音的js 网上找吧！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99207.html
摘要：到目前为止我们只实现了搜索功能，按更优的体验来讲，在搜索结果中，要优先把相连匹配的放在首位，如关键字，要把结果放到前面。 我们先看一下效果图：showImg(https://segmentfault.com/img/remote/1460000015486183?w=199&h=107); 这是搜索关键字cfg时，会自动匹配到config方法 同样，我们再看另一个例子 showImg(...
摘要：前缀部分必须完全匹配。搜索建议搜索建议功能，需要配合程序，在向中存入文档时，就需要通过分词等方式，指定搜索建议字段的内容。注意，高亮的结果在返回时单独存放，并不是将数据做了改变。的官方文档是最好的参考资料，介绍很全面。 模糊搜索 可以进行模糊搜索： GET job/type1/_search { query:{ fuzzy:{ title:{ v...
摘要：前缀部分必须完全匹配。搜索建议搜索建议功能，需要配合程序，在向中存入文档时，就需要通过分词等方式，指定搜索建议字段的内容。注意，高亮的结果在返回时单独存放，并不是将数据做了改变。的官方文档是最好的参考资料，介绍很全面。 模糊搜索 可以进行模糊搜索： GET job/type1/_search { query:{ fuzzy:{ title:{ v...
摘要：搜索请求用于与搜索文档聚合相关的任何操作，还提供了在结果文档上请求高亮的方法。将字段高光色添加到高亮构建器。稍后可以从中检索高亮的文本片段。 Search API 搜索请求 SearchRequest用于与搜索文档、聚合、suggestions相关的任何操作，还提供了在结果文档上请求高亮的方法。 在最基本的表单中，我们可以向请求添加查询： SearchRequest searchReq...
摘要：搜索请求用于与搜索文档聚合相关的任何操作，还提供了在结果文档上请求高亮的方法。将字段高光色添加到高亮构建器。稍后可以从中检索高亮的文本片段。 Search API 搜索请求 SearchRequest用于与搜索文档、聚合、suggestions相关的任何操作，还提供了在结果文档上请求高亮的方法。 在最基本的表单中，我们可以向请求添加查询： SearchRequest searchReq...
阅读 3410·2021-11-15 11:37
阅读 2521·2021-08-20 09:37
阅读 1427·2019-08-30 12:47
阅读 975·2019-08-29 13:27
阅读 1593·2019-08-28 18:02
阅读 645·2019-08-23 18:15
阅读 2957·2019-08-23 16:51
阅读 818·2019-08-23 14:13
