vue+iview实现拼音、首字母、汉字模糊搜索
最近项目做的后台管理系统中,要求实现一个支持拼音、首字母和汉字模糊搜索的下拉框。项目是用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函数来把每一项都处理一下
以上就步骤就实现了拼音、首字母(不分大小写)和汉字的搜索,但必须注意前提是需要后台支持这些类型的搜索且能正确返回数据
因为我编辑和新建用的是同一个页面所以还要编辑回显数据:
vue+iview实现拼音、首字母、汉字模糊搜索相关推荐
- js vue汉字转拼音或拼音首字母
第一种 html <!DOCTYPE html> <html><head><meta charset="UTF-8"><tit ...
- Android 利用AutoCompleteTextView实现模糊搜索功能,搜索结果自动提示,识别拼音首字母并转汉字提示
这里说一下怎么利用 Android 的 AutoCompleteTextView 控件实现模糊搜索功能,AutoCompleteTextView 自带自动提示功能.如果 对自动提示的布局自定义要求比较 ...
- vue 输入中文转拼音首字母(附转大写)
新建js文件 "pinyin.js" 复制代码进js文件中 import Vue from 'vue' var strChineseFirstPY ='YDYQSXMWZSSXJB ...
- PostgreSQL数据库sql查询如何获取汉字拼音首字母
一.前言 在实际开发过程中,经常会使用模糊查询,根据某个关键字模糊搜索,一般是 name like '%123%' 这样查,但是如果某个关键字用户不记得呢,只知道首字母,又如何模糊查询呢?例如,查询 ...
- python怎么识别拼音-python获取一组汉字拼音首字母的方法
本文实例讲述了python获取一组汉字拼音首字母的方法.分享给大家供大家参考.具体实现方法如下: #!/usr/bin/env python # -*- coding: utf-8 -*- def m ...
- 小功能 获取一段汉字的拼音首字母
Code 1 internal sealed class program 2 { 3 public static void Main() { 4 Co ...
- C# 使用微软的Visual Studio International Pack 类库提取汉字拼音首字母
昨天经过网友提醒,提取汉字拼音的方法可以使用微软的一个类库 Visual Studio International Pack ,今天试了一试,确实好用!下面分享下使用方法: 首先下载Visual St ...
- php mysql 拼音首字母,Mysql应用MySQL查询汉字的拼音首字母实例教程
<Mysql应用MySQL查询汉字的拼音首字母实例教程>要点: 本文介绍了Mysql应用MySQL查询汉字的拼音首字母实例教程,希望对您有用.如果有疑问,可以联系我们. 导读:最好的方法还 ...
- php 汉字转拼音及获取拼音首字母
1. 获取拼音(接受中英文混合): // $_Code is utf8 or gb2312 function pinyin($_String, $pix = '', $_Code='utf8') {$ ...
最新文章
- 有关于诚信:唐骏学历门
- python 隐马尔科夫_隐马尔可夫模型原理和python实现
- 百度开发者大会-《用HTML5新特性开发移动App》PPT分享
- Android获取手机应用程序包的信息
- 如何做网络营销推广之网站SEO中title标签优化技巧!
- 通俗说一下python和人工智能有什么关系
- Spring分布式事务实现
- 基于农业物联网的感知数据获取和可视化系统
- python声音信号调制_用python产生正弦波和PWM信号产生脉冲幅度调制
- 现在做Android开发有前途吗?附面试题答案
- 數據庫ORACLE轉MYSQL存儲過程遇到的坑~(總結)
- xml格式报文的拼装,和解析成实体类
- 2016网易研发题目
- 一种基于地图导航的语音识别管理系统的制作方法
- TypeError: unorderable types: str() = int()
- 《软件测试》阅读笔记
- python双分支结构_3.1.2 双分支结构
- JS中find()和findIndex()
- 题目7飞机票订票系统
- 关于MFC的使用总结之八——CGridListCtrlEx鼠标响应事件
热门文章
- 2021-5-5今日目标计划行动理由
- Atcoder abc179 D - Leaping Tak(前缀和维护DP)
- 如何在C/C++中定义坐标函数gotoxy()并灵活运用之
- 【直播回顾】OpenHarmony知识赋能六期第五课—WiFi子系统
- 静态时序分析简明教程(五)]生成时钟的sdc约束方法
- 关系数据库基础:关系代数运算知识笔记
- B2C电商项目(第十三天、超时未支付订单处理、订单批量发货、确认收货与自动收货)
- \x 和 0x 的区别
- java银行管理系统大作业_银行管理系统项目 《JAVA程序设计》课件.doc
- 轮询任务调度和抢占式任务调度有什么区别