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

目录
  • 先看效果图
  • 解决思路
  • 页面结构
  • 校验规则
  • 远程搜索方法
  • 表单submit提交方法的传参中

最近项目做的后台管理系统中，要求实现一个支持拼音、首字母和汉字模糊搜索的下拉框。项目是用vue+iview做的，iview中有select远程搜索。但是，iview框架也有弊病就是会将输入框中的输入值进行过滤，如果你搜英文的，ok是可以实现的，看人家例子准备的数据也是英文的，但咱要求的是中文也能搜索，首字母和拼音都支持。

输入中文，因为框架中是根据value取值的，所以你输入的拼音和首字母在后台返回的数据中是没有的，所以就过滤掉了。后台是支持模糊搜索的，搜索的数据也是可以返回的，但就是赋不上值。想了好多办法都行不通，感觉这个框架有点鸡肋，也不支持拼音首字母搜索，以为只有改源码才能实现。后来终于想出了办法，虽然有点麻烦，但只要能实现了就行，你说呢？

先看效果图

支持汉字：

支持拼音：

支持首字母：

解决思路

在新建的页面中：在远程搜索的方法里，后台返回的数据时给做下处理，把返回的value值后边拼接一个特殊字符，再拼接上你输入框输入的值，这样因为value里含有你输入的值就不会被过滤掉，因而就能赋上值了。

校验规则修改：如果有表单校验，要在校验时改变校验规则type: 'string'，因为拼接完就是字符串了。

submit提交方法中：在submit提交表单方法里再做下处理，把刚才拼接的字符串，用特殊字符处理成数组取第1位就是原来的value值了，不过是字符串形式了，要让后台接收字符串形式的。

编辑回显页面中：要让后台配合返回的id值是字符串形式，返回的下拉列表中每个数组对象的value值也是字符串形式的。如果后台不改，只能自己再循环遍历处理成字符串。

是不是说的一脸懵逼，直接上图看的更清楚些：

页面结构

校验规则

单选下拉框type是字符串，多选type要求是array类型

远程搜索方法

这个地方单选框和多选框处理方法一样

表单submit提交方法的传参中

单选下拉框把选的v-model里的值（这里绑定的是value值）进行处理，把刚才拼接的特殊字符和输入值去掉，取前面的id值

多选因为取到的v-model值是一个数组，所以要用map函数来把每一项都处理一下

以上就步骤就实现了拼音、首字母（不分大小写）和汉字的搜索，但必须注意前提是需要后台支持这些类型的搜索且能正确返回数据

因为我编辑和新建用的是同一个页面所以还要编辑回显数据：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue+iview写个弹框的示例代码

    iView 是一套基于Vue.js的开源UI组件库,主要服务于PC界面的中后台产品. 1.iView的特性 1) 高质量.功能丰富 2) 友好的API ,自由灵活地使用空间 3) 细致.漂亮的 UI 4) 事无巨细的文档 5) 可自定义主题 2.iView的安装: 1) 使用npm: npm install --save iview 2) CDN引入: <link rel="stylesheet" href="css/iview.css" rel="

  • vue+iview框架实现左侧动态菜单功能的示例代码

    最近在使用vue-cli3配合iview框架搭建新的项目中用到了iview中的menu菜单,按照官网写法固定不太好,因为一般项目都是从后端动态获取菜单列表,所以我们需要将官网代码稍作修改,代码如下: 注意事项: [1]菜单高亮部分动态绑定路由跳转的页面 Menu组件中有一个active-name反映的是当前高亮区域,因此可以动态的绑定active-name来实现高亮显示.前提是需要将MenuItem绑定的name也设置成页面路由的name [2]动态获取菜单数据,需要更新菜单 this.$nex

  • vue+iview 实现可编辑表格的示例代码

    先简单说明一下,这个Demo引入的vue,iview的方式是标签引入的,没有用到webpack之类的构建工具... 毕竟公司还在用angularjs+jq. 这也是我第一次写文章,大家看看思路就行了,要是有大佬指点指点就更好了 话不多说,先来个效果图 我们再看下极为简单的目录结构 IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关

  • vue+iview实现分页及查询功能

    vue+iview 分页及删.查功能实现 首先要想实现分页功能必须得知道 当前页码.每页大小.总数目. iview对分页的功能支持还是很强大的,有很多钩子函数 具体实现看后端返回的数据 <template> <div v-if="this.$store.state.user.userType == 0 || this.$store.state.user.userType == 1"> <Input type="text" search

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

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

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

  • C#实现汉字转拼音或转拼音首字母的方法

    本文实例讲述了C#实现汉字转拼音或转拼音首字母的方法.分享给大家供大家参考.具体实现方法如下: /// <summary> /// 汉字转拼音或转拼音首字母 /// </summary> public class ChineseToSpell { private static int[] pyValue = new int[] { -20319,-20317,-20304,-20295,-20292,-20283,-20265,-20257,-20242,-20230,-20051

  • php 获得汉字拼音首字母的函数

    php获取汉字拼音的第一个字母 复制代码 代码如下: <?php function getinitial($str) { $asc=ord(substr($str,0,1)); if ($asc<160) //非中文 { if ($asc>=48 && $asc<=57){ return '1'; //数字 }elseif ($asc>=65 && $asc<=90){ return chr($asc); // A--Z }elseif

  • php获取汉字拼音首字母的方法

    现实中我们经常看到这样的说明,排名不分先后,按姓名首字母进行排序.这是中国人大多数使用的排序方法.那么在php程序中该如何操作呢? 下面就分享一下在php程序中获取汉字拼音的首字母的方法,在网上搜到的大多数是有问题的,这个可是经过小编实践应用过的,真的可以使用的哦. //php获取中文字符拼音首字母 function getFirstCharter($str){ if(empty($str)){return '';} $fchar=ord($str{0}); if($fchar>=ord('A'

  • PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法

    本文实例讲述了PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法.分享给大家供大家参考,具体如下: ICU(International Components for Unicode)里提供了transliterator(直译器), 可以很方便把其他语言(比如简体中文)转为拉丁文表示: http://cn2.php.net/manual/zh/transliterator.transliterate.php Transliterator: allows getting la

  • python获取一组汉字拼音首字母的方法

    本文实例讲述了python获取一组汉字拼音首字母的方法.分享给大家供大家参考.具体实现方法如下: #!/usr/bin/env python # -*- coding: utf-8 -*- def multi_get_letter(str_input): if isinstance(str_input, unicode): unicode_str = str_input else: try: unicode_str = str_input.decode('utf8') except: try:

  • 获取字符串中的汉字拼音首字母

    获取字符串中的汉字拼音首字母(根据http://blog.csdn.net/iwebsms/archive/2004/09/28/119851.aspx修改) 可能代码比较臃肿,希望有朋友再帮忙改正 //返回给定字符串的首字母   private String IndexCode(String IndexTxt)   {    String _Temp=null;    for(int i=0;i<IndexTxt.Length;i++)     _Temp = _Temp + GetOneIn

  • C#获取汉字字符串拼音首字母的方法

    本文实例讲述了C#获取汉字字符串拼音首字母的方法.分享给大家供大家参考.具体如下: 这个C#类经常能够用到,将提取汉字的拼音首字母,方便用户查询 using System.Text; namespace DotNet.Utilities { public class PinYin { public string GetFirstLetter(string hz) { string ls_second_eng = "CJWGNSPGCGNESYPBTYYZDXYKYGTDJNNJQMBSGZSCY

  • C# 获取汉字的拼音首字母

    获取汉字拼音的首字母是一个在做项目的过程中经常需要用到的功能,今天我们主要来探讨下C# 获取汉字的拼音首字母 /// <summary> /// 在指定的字符串列表CnStr中检索符合拼音索引字符串 /// </summary> /// <param name="CnStr">汉字字符串</param> /// <returns>相对应的汉语拼音首字母串</returns> public static string

  • java 根据汉字生成拼音全拼或拼音首字母的示例

    1.情景展示 java 根据中文生成对应的拼音 2.准备工作 所需jar包:pinyin4j-2.5.0.jar 3.解决方案 导包 import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin4j.format.HanyuPinyinCaseType; import net.sourceforge.pinyin4j.format.HanyuPinyinOutputFormat; import net.so

随机推荐