vue中利用pinyin-pro纯前端实现拼音的模糊搜索功能

目录
  • 1、安装配置插件
  • 2.编写工具类方法
  • 3.调用方法

1、安装配置插件

pinyin-pro官网网址：

pinyin-pro - npm (npmjs.com)

npm 安装

npm install pinyin-pro

项目中引入

import { pinyin } from 'pinyin-pro';

2.编写工具类方法

定义三个变量：

// 双向绑定搜索框,由用户输入的数据
inputProvince: 'ninxia',

// 从后台获取的，筛选前的总数据
totalProvinceList: [
{ province: '宁夏省'，id：'0001', turnover: '50' },
.....
],
// 由inputProvince从totalProvence中筛选后的数据，双向绑定列表
provinceList: [],

编写方法：

在vue中定义方法用的是mehtod(){return 0}的形式，其他框架中视情况改变定义的办法

// 输入框搜索有关方法

    pinyinFilter (inputValue, totalList) { // 工具类方法，从数组中过滤出汉字、拼音、拼音首字母相同的项
      /* 输入内容拼音转换 */
      // 完整拼音
      const pyInput = pinyin(inputValue, { toneType: 'none', type: 'array' }).join('')
      console.log('pyInput', pyInput)

      // 拼音首字母
      const headerPyInput = pinyin(inputValue, { pattern: 'first', type: 'array' }).join('')
      console.log('headerPyInput', headerPyInput)

      return totalList.filter(e => {
        // 列表中每项的拼音
        const pyE = pinyin(e.province, { toneType: 'none', type: 'array' }).join('').slice(0, pyInput.length)
        console.log('pyE', pyE)

        // 列表中每项的拼音首字母
        const headerPyE = pinyin(e.province, { pattern: 'first', type: 'array' }).join('').slice(0, headerPyInput.length)
        console.log('headerPyE', headerPyE)
        console.log('_____________________')

        // 过滤匹配
        return e.province.includes(inputValue) || (pyE === pyInput) || (headerPyE === headerPyInput)
      })
    },

3.调用方法

笔者使用的是vue，所以在数据的调用前加了this.

this.provinceList = this.pinyinFilter(this.inputProvince, this.totalProvinceList)

到此这篇关于vue中利用pinyin-pro纯前端实现拼音的模糊搜索的文章就介绍到这了,更多相关vue 模糊搜索内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue+iview如何实现拼音、首字母、汉字模糊搜索

    vue+iview如何实现拼音、首字母、汉字模糊搜索

    目录 先看效果图 解决思路 页面结构 校验规则 远程搜索方法 表单submit提交方法的传参中 最近项目做的后台管理系统中,要求实现一个支持拼音.首字母和汉字模糊搜索的下拉框.项目是用vue+iview做的,iview中有select远程搜索.但是,iview框架也有弊病就是会将输入框中的输入值进行过滤,如果你搜英文的,ok是可以实现的,看人家例子准备的数据也是英文的,但咱要求的是中文也能搜索,首字母和拼音都支持. 输入中文,因为框架中是根据value取值的,所以你输入的拼音和首字母在后台返回的

  • vue实现多条件和模糊搜索功能

    本文实例为大家分享了vue实现多条件和模糊搜索的具体代码,供大家参考,具体内容如下 html <div class="content"> <div class="right"> <select name="sex" width='100' v-model="formData.sex"> <option value="" selected>请选择</opt

  • vue输入框使用模糊搜索功能的实现代码

    实现原理: 利用js的 indexOf 方法可返回某个指定的字符串值在字符串中首次出现的位置. 模板中的代码 <div class="search"> <!--输入框使用的是vant的输入框组件--> <van-search @input="autoSearch" v-model="value" placeholder="请输入搜索关键词" style="width:90%; displ

  • vue搜索和vue模糊搜索代码实例

    1.使用vue来实现一般搜索 <form action="" @submit="submitQuery" class="all_two"> <el-input v-model="input" placeholder="请输入内容" ref="search" style="width:300px;"></el-input> </

  • vue中利用pinyin-pro纯前端实现拼音的模糊搜索功能

    目录 1.安装配置插件 2.编写工具类方法 3.调用方法 1.安装配置插件 pinyin-pro官网网址: pinyin-pro - npm (npmjs.com) npm 安装 npm install pinyin-pro 项目中引入 import { pinyin } from 'pinyin-pro'; 2.编写工具类方法 定义三个变量: // 双向绑定搜索框,由用户输入的数据 inputProvince: 'ninxia', // 从后台获取的,筛选前的总数据 totalProvince

  • vue中利用simplemde实现markdown编辑器（增加图片上传功能）

    前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果 安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si

  • vue中利用mqtt服务端实现即时通讯的步骤记录

    MQTT协议 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输)是IBM开发的一个即时通讯协议,有可能成为物联网的重要组成部分.该协议支持所有平台,几乎可以把所有联网物品和外部连接起来,被用来当做传感器和制动器(比如通过Twitter让房屋联网)的通信协议. MQTT是轻量级基于代理的发布/订阅的消息传输协议,它可以通过很少的代码和带宽和远程设备连接.例如通过卫星和代理连接,通过拨号和医疗保健提供者连接,以及在一些自动化或小型设备上,而且由于小巧

  • vue中利用Promise封装jsonp并调取数据

    Promise就是一个给一步操作提供的容器,在这个容器里,有两个阶段无法改变的阶段,第一个阶段就是Pending(进行),第二个阶段就是结果阶段,包含Fulfilled(成功).Rejected(失败)两个结果. 这两个结果不会改变.然后结果结束后就会用then来执行相应的结果. new Promise((resolve,reject)=>{ 相应操作 if(异步操作成功){ resolve(value) }else{ reject(error) } }).then(value=>{ // 成

  • 在vue中利用v-html按分号将文本换行的例子

    最近在开发的时候遇到这样一个需求,需要将一段文本按照分号(有中文分号和英文分号)进行换行操作. 如下: 换行前:雷军,2457.66万,自然人股东;洪锋,169.51万,自然人股东;黎万强,10.33万,自然人股东; 换行后: 雷军,2457.66万,自然人股东; 洪锋,169.51万,自然人股东; 黎万强,10.33万,自然人股东; 显示的html: <p class="bgnr-txt" v-html="change(content)"> js: m

  • 在vue中利用全局路由钩子给url统一添加公共参数的例子

    有的时候我们可能有这样的需求,比如现在url为m.taoyuewenhua.com/#/ 我们需要在用户每次跳转路由的时候监控有没有abc这个参数. 如果有,后端要求我们在以后跳转任何url的时候,都要在url携带上这个参数.就变成m.taoyuewenhua.com/#/&abc=xxx; 这个参数称为"公共参数"; 那么,我们该如何做呢?因为vue中有很多组件.在每个组件都写的话,太麻烦.所以这个时候,全局路由钩子登场了.分别是 router.beforeEach 全局导航

  • vue中利用iscroll.js解决pc端滚动问题

    项目中经常遇到区域超出部分会出现滚动条,滚动条在pc端可以通过鼠标滚轮控制上下,在移动端可以通过鼠标拖动页面进行滚动,这两种场景都是符合用户习惯,然而这种滚动条一般都是竖[vertical]项滚动条,如果pc端出现横向滚动条[horizontal],在不做处理的情况下,你只能用鼠标拖动横向滚动条按钮[scrollerbar]展示滚动区域,而且为了美观,一般滚动条会进行样式编写或者隐藏,那么横向区域默认情况下就没法滚动. 二.描述 现为了解决pc端滚动区域能像移动端一样,能够通过鼠标拖动滚动区域直

  • vue中利用three.js实现全景图的完整示例

    粗暴一点,直接上代码: 第一步: 通过指令下载three.js npm install three -S 第二步: 在组件中引用 import * as THREE from 'three' 第三步: html部分 <div id="container"></div> js部分 <script> import * as THREE from 'three'; var camera; var renderer; var scene; export de

  • Vue中利用better-scroll组件实现横向滚动功能

    Vue中利用better-scroll组件实现横向滚动功能

    About 最近在学习vue的过程中,仿照去哪儿网的移动端写了个小项目,旨在实践和巩固基础知识,但是今天发现去哪儿的首页上有一个组件用户体验较差,即一个横向列表使用浏览器的原生滚动实现,列表滚动起来较为生涩,很难受,于是乎决定由better-scroll重写这个组件. better-scroll介绍 better-scroll是黄轶大神(没错,我学长)写的基于i-scroll的一个滚动组件,项目地址:https://github.com/ustbhuangyi/better-scroll 一.滚

  • vue中利用prop进行父子通信时的注意事项总结

    目录 注意点一 注意点二 注意点三:单项数据流 注意点四 总结 注意点一 当在组件上传入一个普通的字符串时,我们可以直接这样写: <one name="张三"></one> 需要注意的是,当我们想要传入数字时,我们需要使用v-bind绑定一个数字,否则无法识别数字,vue会认为你传入的是一个字符串数字. 特殊的值包括:向字符键传这些类型的数据时,都需要使用v-bind来告诉vue,我们传输的是静态的值. 数字 布尔值 数组 对象 <one name=&qu

随机推荐