js对页面中的内容进行拼音搜索,只对后台已经传过来的页面数据进行索引
实现输入拼音(可以使用拼音首字母来查),来查询出已经存在于页面的数据
注意:这种写法只能适用于页面中已经存在的数据进行检索,大体意思是将本页内的数据拼接成一个字符串,然后通过该字符串去检索匹配的字符串
能够使用拼音快速检索目标。
28.5KB (gzip => 20.3KB)
支持多音字、拼音首字母匹配,具备分词功能
覆盖 6763 个汉字
返回位置信息,可用于高亮匹配字符
在长多音字串下依然有高性能
引自:https://blog.csdn.net/lucky12_3/article/details/102496880,也可以去他那里找js文件,我改装的他的代码
1、首先,引入js,这个文件我会放到我的文件中,需要的可以去那里找
<script src="/static/yjs/js/pinyin.js"></script>
2、截取字符串函数
function redFont(str, start ,end) {
return str.substring(start, end + 1)
}
3、将页面中的数据拼接成字符串,然后根据输入的搜索内容进行查询
//data是一个数组对象,将data中需要查询的值拼接成一个字符串
for(var j=0;j<data.length;j++){
text += data[j].standard+data[j].type+data[j].ptypeid+data[j].pfullname+data[j].barcode
}
// search为搜索的内容
var m = PinyinMatch.match(text,search)
var n = redFont(text, m[0], m[1])
//n就是返回的就是拼音拼成的汉字
当然具体情况需要具体处理,这里我只是记录一下,毕竟我的这个页面只是需要这一种方法,如果后期还需要其他的处理逻辑,比如根据拼音去后台查询,那再去研究吧
js对页面中的内容进行拼音搜索,只对后台已经传过来的页面数据进行索引的更多相关文章
- js打印Iframe中的内容,并且不需要预览。
js打印Iframe中的内容,并且不需要预览 js代码如下: <script type="text/javascript" language="Javascript ...
- Android : 如何在WebView显示的页面中查找内容
Android : 如何在WebView显示的页面中查找内容 Author : Aoyousatuo Zhao http://blog.sina.com.cn/aoyousatuo WebView是A ...
- js将HTML中table导出到EXCEL word (只支持IE) 另用php 配合AJAX可以支持所有浏览器
转载请注明来源:https://www.cnblogs.com/hookjc/ <HTML> <HEAD> <title>WEB页面导出为EXC ...
- 在某网站的登录页面登录时如果选择“记住用户名”,登录成功后会跳转到一个中间层(页面代码将登录的用户名和密码存在cookie),中间页面中存在一个超链接,单击超链接可以链接到第三个页面查看信息。若选择“
Response实现登录并记录用户名和密码信息 在某网站的登录页面登录时如果选择"记住用户名",登录成功后会跳转到一个中间层(页面代码将登录的用户名和密码存在cookie),中间页 ...
- 纸壳CMS(ZKEACMS)体验升级,快速创建页面,直接在页面中修改内容
关于纸壳CMS 纸壳CMS又名 ZKEACMS Core 是ZKEACMS的 .net core 版本,可运行在 .net core 1.1 平台上.是一个开源的CMS. 纸壳CMS对于 ZKEACM ...
- JS 导出网页中Table内容到excel
<html> <head> <script type="text/javascript" language="javascript" ...
- Vue使用Clipboard.JS在h5页面中复制内容
安装clipboard.js github路径:https://github.com/zenorocha/clipboard.js 安装: npm install clipboard --save 引 ...
- 通过CSS控制页面中的内容垂直居中的方法
方法一:通过行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是25 ...
- js打印html中的内容
js打印方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
随机推荐
- python 获取的json字符串取值
获取到的json字符串,然后对其取值 {u'result': {u'10.10.10.100': {u'status': u'OK', u'msg': u"{'listen': {'': s ...
- B站百大UP主党妹被黑客勒索!!!
4月27日,哔哩哔哩视频网站的UP主“机智的党妹”发布消息称,自己被黑客勒索了.她的视频表示:“事发突然,我被勒索了,你也有可能继续被诈骗!这种诈骗的页面是由病毒程序自动生成并留在那里的.”根据她的介 ...
- 5. 配置项:rule_files
prometheus配置文件内容: global: # 默认情况下抓取目标的频率. [ scrape_interval: <duration> | default = 1m ] # 抓取超 ...
- 十六, Oracle约束
前言 数据的完整性用于确保数据库数据遵从一定的商业和逻辑规则,在oracle中,数据完整性可以使用约束.触发器.应用程序(过程.函数)三种方法来实现,在这三种方法中,因为约束易于维护,并且具有最好的性 ...
- GIT分布式版本控制
1.1Git简介 linus 用C语言编写 2005年诞生 分布式版本管理系统 速度快,适合大规模,跨地区多人协同开发 Git不仅是一款开源的分布式版本控制系统,而且有其独特的功能特性,例如大多数的分 ...
- java中ThreadLocal的使用
文章目录 在Map中存储用户数据 在ThreadLocal中存储用户数据 java中ThreadLocal的使用 ThreadLocal主要用来为当前线程存储数据,这个数据只有当前线程可以访问. 在定 ...
- Ubuntu 之 win10更新ubuntu启动项消失
问题描述: 昨晚windows更新,今天启动的时候发现启动项没有了,直接进入windows. 解决方案一: 首先进入BIOS看一看是否开启启动项选择,然后再把安全模式(secure boot)关闭(重 ...
- 学习web前端的roadmap
- AMD 开源照片级渲染引擎 Radeon ProRender
除了Radeon Pro WX.Radeon Pro Solid State两款全新的专业显卡,AMD今天还宣布,Radeon ProRender渲染引擎即将开放源代码,开发人员可任意使用.AMD去年 ...
- 如何理解Java的值传递
结论 为了加深印象,先把结论放在文章开头. ++Java中只有值传递++. 形参与实参 在理解Java的值传递 实参Argument 实际参数,主调用函数传递给调用函数的参数 形参Parameter ...