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. ...
随机推荐
- Springboot:员工管理之修改员工(十(8))
构建员工修改请求 com\springboot\controller\EmployeeController.java /*调转到员工修改页 携带员工信息 restful风格*/ @GetMapping ...
- 聊聊JavaScript在工作中常用的方法(一)
一.字符串转数组(split方法) 废话少说,直接上代码: //例子1 var str="abc,def,ghi"; var strArray=str.split(",& ...
- 支持向量机SVM知识梳理和在sklearn库中的应用
SVM发展史 线性SVM=线性分类器+最大间隔 间隔(margin):边界的活动范围.The margin of a linear classifier is defined as the width ...
- php 对象的调用和引入
直接上实例: 定义: <?php namespace app\php; class a { ; public function index() { echo "; } static f ...
- UVALive 7501 Business Cycle
细心题 #include<bits/stdc++.h> using namespace std; #define rep(i,a,b) for(int i=a;i<=b;++i) # ...
- 使用nodejs + wecharty打造你的个人微信机器人
开源地址:https://github.com/isnl/wechat-robot 注: 从2017年6月下旬开始,使用基于web版微信接入方案存在大概率的被限制登陆的可能性. 主要表现为:无法登陆W ...
- Vs Code中炫酷写代码插件Power Mode的安装配置
扩展栏搜索 Power Mode 安装 安装后重启vs code 文件->首选项->设置 搜索setting.json,点击在setting.json中编辑 打开之后在右侧用户设置里添加以 ...
- Python 正则表达式——re模块介绍
Python 正则表达式 re 模块使 Python 语言拥有全部的正则表达式功能,re模块常用方法: re.match函数 re.match从字符串的起始位置匹配,如果起始位置匹配不成功,则matc ...
- "net.sf.hibernate.PropertyValueException"
2019独角兽企业重金招聘Python工程师标准>>> 如果你遇到了下面的错误信息,例如: ERROR [Importing data task] [confluence.impor ...
- TCP 3-Way Handshake
TCP是面向连接的协议,其数据传输过程分为建立连接.数据传送.释放连接三个阶段. 0 建立连接 建立连接的过程也就是常说的"三次握手": 客户端向服务器端发送一个SYN报文(SYN ...