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. ...
随机推荐
- Blazor WebAssembly 3.2.0 已在塔架就位 将发射新一代前端SPA框架
最美人间四月天,春光不负赶路人.在充满无限希望的明媚春天里,一路风雨兼程的.NET团队正奋力实现新的突破. 根据计划,新一代基于WebAssembly 技术研发的前端SPA框架Blazor 将于5月1 ...
- MVC-基础01
MVC体系结构将应用程序分成三个主要组件:模型(Model).视图(View).和控制器(Controller).在ASP.NET MVC应用程序中,数据操控的逻辑包含在Models文件夹下,数据的展 ...
- Mysql表的对应关系
表关系 一对一一张表中的一条记录与另一张表中最多有一条明确的关系:通常,此设计方案保证两张表中使用同样的主键即可假设一张学生表:id 姓名 年龄 性别 籍贯 婚否 住址那么姓名 年龄 性别 这种字段比 ...
- JavaScript HTMlL DOM对象(上)
Dom:document.相当于把所有的html文件,转换成了文档对象. 之前说过:html-裸体的人:css-穿上衣服:js-让人动起来. 让人动起来,就得先找到他,再修改它内容或属性. 找到标签 ...
- windows服务程序的编写
服务编写https://blog.csdn.net/lanuage/article/details/77937407 #include <windows.h> #include <s ...
- 蘑菇街CEO陈琪上市致辞:科技是生产力 美丽也是生产力
雷帝网 乐天 12月7日报道 蘑菇街CEO陈琪今日在纽交所上市致辞时表示,蘑菇街的使命是让时尚触手可及,立志成为最领先的时尚目的地,并把"科技是生产力,美丽也是生产力"作为蘑菇街价 ...
- mybatis源码学习(四):动态SQL的解析
之前的一片文章中我们已经了解了MappedStatement中有一个SqlSource字段,而SqlSource又有一个getBoundSql方法来获得BoundSql对象.而BoundSql中的sq ...
- bootstrap-分页-默认分页
说明 默认分页 示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...
- [译] React 16.3(.0-alpha) 新特性
原文地址:What's new in React 16.3(.0-alpha) 原文作者:Bartosz Szczeciński 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/ ...
- sphinx的使用
1.下载地址 http://sphinxsearch.com/downloads/release/ 2.将其解压到D:\sphinx,并在D:\sphinx下新建目录data(用来存放索引文件)与lo ...