文章时间:2020年5月28日 13:37:18 解决问题:在搜索框搜索某些东西的时候,我们经常输入了拼音,依然也可以显示搜索出的文字。...所用插件:ChinesePY.js 投稿人:梦群同学 ChinesePY 嵌入使用方法 下载完成后在项目 main.js 中引入 使用方法及返回格式 手写自己的根据拼音查询 公共函数 使用 ChinesePY...嵌入使用方法 首先在Github下载ChinesePY.js [下载地址] 下载完成后在项目 main.js 中引入 import Pinyin from '....> ZH (注意 简拼返回值为大写) Pinyin.GetQP('中国') // 获取全拼 -> zhongguo Pinyin.GetHP('中国') // 获取混拼 -> zhongg 手写自己的根据拼音查询
实现思路很简单,汉字有21个声母:b, p, m, f, d, t, n, l, g, k, h, j, q, x, zh, ch, sh, r, z, c, s 有韵母24个,其中单韵母有6个:a,...,结合unicode编码表,实现起来就很简单了。...DOCTYPE HTML> 用JS实现汉字转拼音 <..."nou": "\u8028", "fou": "\u7f36", "bia": "\u9adf" }; // 汉字转拼音...while (I1.indexOf('--') > 0) { I1 = I1.replace('--', '-'); } return I1; } // 在对象中搜索
要实现拼音模糊搜索功能,通常会采用分词、数据库等技术对待匹配数据集进行预处理。...某些场景受制于条件限制,无法对数据进行预处理,本文将介绍在这种情况下如何实现支持拼音模糊搜索的AutoCompleteBox,先来看下实现效果。...拼音模糊匹配汉字则采用字符串匹配的方式来解决,也就是搜索字符串和待匹配数据集的内容全部转换为拼音字符串,然后进行子串匹配。这里有三个问题需要解决。 汉字转换为拼音。 拼音如何匹配。...汉字转换后的拼音字符串有多组,只要搜索字符串转换的拼音组合有一组与待匹配字符串转换的拼音组合中匹配,则认为匹配成功,为了后续高亮显示,需要记录下匹配的起始位置以及匹配的子串长度。...小结 本文介绍了在不依赖数据库及分词的情况下如何实现拼音模糊搜索并在目标字符串中高亮显示,方法中也存在诸多不足需要完善的地方。 匹配策略存在误匹配。例如输入石,可以匹配出拼音为shi的所有汉字。
功能 分布式的搜索引擎和数据分析引擎 全文检索,结构化检索,数据分析 对海量数据进行近实时的处理 环境搭建 从官网下载压缩包 elasticsearch-5.6.1.tar.gz; 解压 tar -zxvf...} } } } } } 可通过外部数据导入index,或者手动put 最后便可通过es来搜索
概述 本文讲述如何在前端实现城市首字母导航的效果。...效果 实现 1、数据格式 2、实现代码 var map, pyList; function init() { var wms = new ol.layer.Image({...map.getView().setZoom(8); }); } } } }) } //汉字拼音首字母列表
给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。
// 搜索插入的位置 // 给定一个排序数组和一个目标值; // 1. 数组中找到目标值,并返回其索引 // 2.
那么传统的查询方式——根据出发点&目的地查票价——对我们来说效率太低。理想方式当然是:输入出预算金额,就得到一个在预算范围内的所有目的地列表! ?...我们需要输入出发城市、到达城市,出发时间默认为当天,需要修改成第二天及以后,以防由于0点至当前时间点的车次不显示,导致爬取信息不全。 我在杭州,就以杭州东站为出发点,搜索上海为例吧。 ?...https://webresource.ctrip.com/ResTrainOnline/R1/TrainBooking/JS/hotline.min.js?...部分城市对应着两个拼音,比如“杭州东”对应有两串拼音:“hangzhoudong”和“hzd@hangzhou”,我不清楚里面的逻辑。...但是我们只要获得城市的名字即可,因此我也删去了包含“@”关键词的拼音部分。 最后得到如下: ? 一共有2804个城市! 接下来就是批量爬取了,文明爬虫,从我做起,每次更换城市的时候记得休息一会儿哦?
省份/城市/区县定位选择器 :dash::rocket: 微信小程序,一行代码引入的省份/城市/区县定位选择器的库 主要功能 自动定位 城市、区县(也支持手动重新定位) 手动 汉字、拼音搜索 城市,支持搜索数量...335个,覆盖地级市 亦可通过 侧边栏 选择,城市按拼音首字母排列 选择好城市后,自动显示 辖下区县 集成说明 将libs文件夹拷贝至您的小程序项目根目录 在您的项目根目录 app.json 里的 pages...数组里增加一行 "libs/citySelector/switchcity/switchcity" 打开项目里的 /libs/citySelector/config.default.js 文件 将其中的...点击立即打开腾讯地图Key申请页面 快速使用 在您要打开选择器地方用navigator组件,将url设置为 "/libs/citySelector/switchcity/switchcity" 或者,在 JS.../区县数据设置到本页面的 this.data.address 内 如图所示 修改颜色样式 在libs文件夹搜索 #c60a0d ,替换为您想要的颜色值即可 功能演示 Gif有点卡,不过实际操作起来是超级流畅的
获取各种资料粒子特效、可视化等源码 业余时间在开发一个类似时间胶囊的小程序,由于微信提供云开发,所以省了不少事,最近在研究根据当前地理位置,在指定半径内获取已经埋藏的时间胶囊,在实际开发过程中,遇到了一点小问题...功能描述 其实功能很简单,就是获取当前地理位置,在根据当前地理位置半径为500米(可自由设定半径)获取已经埋藏好的时间胶囊, 实现步骤 云开发里面新建一个集合,里面放用户数据,不过多讲解,官方文档写的很清楚...新建查询云函数,如果你只根据location字段搜索,我下面的你可以直接复制,把参数传进来,替换Point里面的坐标即可。
贴一下原项目的地址,还在使用小程序自带框架的同学可以使用这个库哦 项目地址 先一起看一下实现的效果图: ? 城市选择器示例.gif 在改写完代码以后,我也来谈谈这个小组件里的实现逻辑。...我们将地级市的数据存放到本地的city.js文件中,在这个city.js的文件中,还同时包括城市检索的首字母的数组数据,页面的城市列表以及首字母检索的数据就会从city.js中读取。...selectcounty'; this.completeList = []; this.selectCounty(); } /* Vuex中的selectCounty()函数 */ // 根据城市代码...config.key}`); }, fail: function() { console.log('请求区县失败,请重试'); } }); }, 这里就是主要的点选逻辑,接下来看看搜索框实现的搜索逻辑...我们的搜索框要求能够通过汉字或者拼音搜索,所以在搜索逻辑中,我们根据对象的short和shorter属性来进行匹配,具体的逻辑可以看如下代码: /** * 搜索匹配逻辑 */ auto() {
项目演示地址 高仿美团网 源码下载 码云 项目介绍 前端 :Nuxt.js/vue-router/ Vuex/ ELement-ui 后端 :Node.js/Koa2/Koa-router/Nodemailer.../Passport HTTP通讯 :Axios 数据支撑 :Mongoose/Redis/高德地图web服务api接口 实现功能 登录注册,qq邮箱自动发验证码 城市切换:更新不同城市的信息...search搜索,根据当前城市进行用POI的关键字进行条件搜索 高德地图自动定位 项目安装 先安装npx npm install -g npx 然后用npx安装模板 npx create-nuxt-app...; 或者把data里的this暂时存起来_this=this; 导入数据库 mongoimport -d dbs -c test pois.dat ssr:服务端直接打在网页上的源码,不需要重渲染 拼音库...可以实现那汉字转拼音 npm i js-pinyin js按照数组里元素的首字母排序 如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字
本文实例讲述了php和js实现根据子网掩码和ip计算子网功能。分享给大家供大家参考,具体如下: php <?...', $sub_net); echo $sub_net; 运行结果: 192.168.2.0 js <script var ip = '192.168.6.1'; var mask = '255.255.255.0
实现这些统计功能的比数据库的sql要方便的多,而且查询速度非常快,可以实现近实时搜索效果。...但是用户搜索条件改变时,搜索结果会跟着变化。 例如:用户搜索“东方明珠”,那搜索的酒店肯定是在上海东方明珠附近,因此,城市只能是上海,此时城市列表中就不应该显示北京、深圳、杭州这些信息了。...也就是说,搜索结果中包含哪些城市,页面就应该列出哪些城市;搜索结果中包含哪些品牌,页面就应该列出哪些品牌。 如何得知搜索结果中包含哪些品牌?如何得知搜索结果中包含哪些城市?...因为需要根据拼音字母来推断,因此要用到拼音分词功能。 2.1.拼音分词器 要实现根据字母做补全,就必须对文档按照拼音分词。在GitHub上恰好有elasticsearch的拼音分词插件。...为了避免搜索到同音字,搜索时不要使用拼音分词器 2.3.自动补全查询 elasticsearch提供了Completion Suggester查询来实现自动补全功能。
class="shop-search" src="images/search.png"/> <input id="shop-input" type="text" placeholder="<em>搜索</em>店内商品...shop-input { height:28px; line-height:28px; font-size:16px; position:absolute; top:0; left:30px; } 3、<em>js</em>
开始项目时,还需要启动另一个项目middleware充当中间件请求weather接口 功能 地址定位 当前定位天气情况 24小时天气情况 7天天气情况 当前地址相关指数 搜索地址...iconfont 字体图片 - images 可以将图片放在服务器请求(减少文件体积) index 指数图片 weather 天气描述图片 - libs city-code.js...城市代码文件 makePy.js 文字转拼音首字母 qqmap-wx-jssdk.min.js 腾讯地图 weather.js 天气描述 - pages weather...天气首页 search 搜索地址页 - server type.js 请求地址 - utils 工具文件 ?
也就是说,搜索结果中包含哪些城市,页面就应该列出哪些城市;搜索结果中包含哪些品牌,页面就应该列出哪些品牌。 如何得知搜索结果中包含哪些品牌?如何得知搜索结果中包含哪些城市?...自动补全 当用户在搜索框输入字符时,我们应该提示出与该字符有关的搜索项,如图: 这种根据用户输入的字母,提示完整词条的功能,就是自动补全了。 因为需要根据拼音字母来推断,因此要用到拼音分词功能。...拼音分词器 要实现根据字母做补全,就必须对文档按照拼音分词。在 GitHub 上恰好有 elasticsearch 的拼音分词插件。...为了避免搜索到同音字,搜索时不要使用拼音分词器 2.3. 自动补全查询 elasticsearch 提供了 Completion Suggester 查询来实现自动补全功能。...实现酒店搜索框自动补全 现在,我们的 hotel 索引库还没有设置拼音分词器,需要修改索引库中的配置。但是我们知道索引库是无法修改的,只能删除然后重新创建。
实现功能描述: 1、实现搜索框的智能提示 2、第二次浏览器缓存结果 3、实现仿百度搜索 </script...AutoKeyWordEntity() { value = "3" }); list.Add(new AutoKeyWordEntity() { value = "360<em>搜索</em>...if (query.Contains("神")) { list.Add(new AutoKeyWordEntity() { value = "神马<em>搜索</em>
,如点击C则定位至C组,同时弹出提示为C 支持城市搜索,页头带搜索框,可支持联想功能,注意性能 选择对应城市,会将对应城市数据带回给使用页面 支持单个页面上同时存在多个城市组件 页面用flex布局(css...格式化之后的格式是按照拼音字母来区分的: ?...需要定位的城市区域(分为最近城市和热门城市) 列表区域 右侧导航区域 搜索弹层区域 具体可以参看src/components/city下的组件 最近选择城市 采用的是本地localstorage进行存储...热门城市 热门城市是自己预先定义的,如果不希望预先定义,也可以参照某些API,这里算是偷懒。 导航条滑动 之前的写过一篇文章移动端效果之IndexList,具体实现可以参看。...搜索联动 支持中/英文搜索,中文搜索是进行了全数据遍历,英文搜索是进行了首字符判断,然后再进行子集遍历。在搜索方面,使用了函数节流,如果在1秒中之内还没有输入完成,则必须进行一次搜索。
领取专属 10元无门槛券
手把手带您无忧上云