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

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

最近项目做的后台管理系统中，要求实现一个支持拼音、首字母和汉字模糊搜索的下拉框。项目是用vue+iview做的，iview中有select远程搜索。但是，iview框架也有弊病就是会将输入框中的输入值进行过滤，如果你搜英文的，ok是可以实现的，看人家例子准备的数据也是英文的，但咱要求的是中文也能搜索，首字母和拼音都支持。
输入中文，因为框架中是根据value取值的，所以你输入的拼音和首字母在后台返回的数据中是没有的，所以就过滤掉了。后台是支持模糊搜索的，搜索的数据也是可以返回的，但就是赋不上值。想了好多办法都行不通，感觉这个框架有点鸡肋，也不支持拼音首字母搜索，以为只有改源码才能实现。后来终于想出了办法，虽然有点麻烦，但只要能实现了就行，你说呢？

先看效果图支持汉字：

文章图片

支持拼音：

文章图片

支持首字母：

文章图片

解决思路在新建的页面中：在远程搜索的方法里，后台返回的数据时给做下处理，把返回的value值后边拼接一个特殊字符，再拼接上你输入框输入的值，这样因为value里含有你输入的值就不会被过滤掉，因而就能赋上值了。
校验规则修改：如果有表单校验，要在校验时改变校验规则type: 'string'，因为拼接完就是字符串了。
submit提交方法中：在submit提交表单方法里再做下处理，把刚才拼接的字符串，用特殊字符处理成数组取第1位就是原来的value值了，不过是字符串形式了，要让后台接收字符串形式的。
编辑回显页面中：要让后台配合返回的id值是字符串形式，返回的下拉列表中每个数组对象的value值也是字符串形式的。如果后台不改，只能自己再循环遍历处理成字符串。
是不是说的一脸懵逼，直接上图看的更清楚些：

页面结构