实现输入拼音(可以使用拼音首字母来查),来查询出已经存在于页面的数据

注意:这种写法只能适用于页面中已经存在的数据进行检索,大体意思是将本页内的数据拼接成一个字符串,然后通过该字符串去检索匹配的字符串

能够使用拼音快速检索目标。

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对页面中的内容进行拼音搜索,只对后台已经传过来的页面数据进行索引的更多相关文章

  1. js打印Iframe中的内容,并且不需要预览。

    js打印Iframe中的内容,并且不需要预览 js代码如下: <script type="text/javascript" language="Javascript ...

  2. Android : 如何在WebView显示的页面中查找内容

    Android : 如何在WebView显示的页面中查找内容 Author : Aoyousatuo Zhao http://blog.sina.com.cn/aoyousatuo WebView是A ...

  3. js将HTML中table导出到EXCEL word (只支持IE) 另用php 配合AJAX可以支持所有浏览器

    转载请注明来源:https://www.cnblogs.com/hookjc/ <HTML>     <HEAD>       <title>WEB页面导出为EXC ...

  4. 在某网站的登录页面登录时如果选择“记住用户名”,登录成功后会跳转到一个中间层(页面代码将登录的用户名和密码存在cookie),中间页面中存在一个超链接,单击超链接可以链接到第三个页面查看信息。若选择“

    Response实现登录并记录用户名和密码信息 在某网站的登录页面登录时如果选择"记住用户名",登录成功后会跳转到一个中间层(页面代码将登录的用户名和密码存在cookie),中间页 ...

  5. 纸壳CMS(ZKEACMS)体验升级,快速创建页面,直接在页面中修改内容

    关于纸壳CMS 纸壳CMS又名 ZKEACMS Core 是ZKEACMS的 .net core 版本,可运行在 .net core 1.1 平台上.是一个开源的CMS. 纸壳CMS对于 ZKEACM ...

  6. JS 导出网页中Table内容到excel

    <html> <head> <script type="text/javascript" language="javascript" ...

  7. Vue使用Clipboard.JS在h5页面中复制内容

    安装clipboard.js github路径:https://github.com/zenorocha/clipboard.js 安装: npm install clipboard --save 引 ...

  8. 通过CSS控制页面中的内容垂直居中的方法

    方法一:通过行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是25 ...

  9. js打印html中的内容

    js打印方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

随机推荐

  1. 关于对vue-router的优化(详尽版)

    这两天总结了关于vue-router优化的几点技法,做个笔记 在基于vue的移动端app中,通过vue-router可以便捷的进入某一路由或回退到上一路由,但是若不对vue-router做相关优化处理 ...

  2. 牛客网机试题-求root(N,k)

    题目描述     N<k时,root(N,k) = N,否则,root(N,k) = root(N',k).N'为N的k进制表示的各位数字之和.输入x,y,k,输出root(x^y,k)的值 ( ...

  3. 对于WebP格式入门解读

    因为项目中需要用到大量动画效果,前期尝试过几种方案,比如GIF.帧动画.lottie.SVGA等格式的动画渲染方案,发现都存在各式各样的问题.比如: 1,GIF格式.5秒的动画,一张图大小可能就会达到 ...

  4. SpringBoot内置生命周期事件详解 SpringBoot源码(十)

    SpringBoot中文注释项目Github地址: https://github.com/yuanmabiji/spring-boot-2.1.0.RELEASE 本篇接 SpringBoot事件监听 ...

  5. SAAS 何以“免费”实现盈利

    本文讲的是SAAS 何以"免费"实现盈利,[IT168 资讯]"天下没有免费的午餐",然而众多厂商却恰恰打出了免费这张王牌,且做出了不小的成绩,淘宝就凭借免费淘 ...

  6. resetlogs 打开数据库时新生成日志位置问题

    若系统中缺少联机日志,以resetlogs方式重建控制文件,那么当我们以alter database open resetlogs方式打开数据库时,新生成的联机日志会位于何处? 一:下面分别讨论几种情 ...

  7. #Lab0 Environment Building

    清华提供了实验环境的很多选项,具体可以参考README 我选择用虚拟机完成. 一.安装VirtualBox 下载链接 一路next,我的版本是6.0.4. 二.下载虚拟硬盘文件 实验所需的软件都在虚拟 ...

  8. Codeforces Round #618 (Div. 2)-B. Assigning to Classes

    Reminder: the median of the array [a1,a2,-,a2k+1] of odd number of elements is defined as follows: l ...

  9. POJ 1330 Nearest Common Ancestors(裸LCA)

    Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 39596   Accept ...

  10. 似乎是最实用的hashtable知识总结

    哈希表:将对象转换为索引,然后存储在数组中. 定义注意点: 对象:就是面向对象中的对象,可以为任何东西.整数.浮点数.日期.字符串.类. 转换:通过hash函数来完成,hash函数是hash表的核心与 ...