拼音过滤选择器

当选择器选项过多时，用过滤的方法可以有效减少备选项。

不过，用中文检索，用户往往还需要切换输入法。如果能够实现拼音过滤，那么用户体验就能上升一个档次。那么，如何实现拼音过滤呢？

利用拼音检索

这里有两种方式：后端实现和前端实现。

后端实现

后端如果采用Django等Python框架的话，可以采用 pypinyin, 完成汉字转拼音。
最直接的方式，是给模型额外增加一个pinyin字段，然后重载 save 方法，完成拼音转换。
为了方便用户用首字母检索，还可以增加一个 pinyin_shortcut 字段，用来存首字母缩写。
简单示例如下：

class Country(models.Model):  
    """ 国家或地区 """    
    name = models.CharField('国家/地区名称', max_length=20, unique=True)  
    code = models.CharField('国家/地区编码', max_length=8, unique=True)  
    pinyin = models.CharField(max_length=80, verbose_name='拼音', help_text='空格隔开, 用于快速搜索')  
    pinyin_shortcut = models.CharField(max_length=20, verbose_name='拼音首字母缩写')  
  
    def save(self, *args, **kwargs):  
        pinyin_list = lazy_pinyin(self.name)  
        self.pinyin = ' '.join(pinyin_list)  
        self.pinyin_shortcut = ''.join([w[0] for w in pinyin_list])  
        super().save(*args, **kwargs)
 
    

这样，只用转换一次，后面用户的请求就不再需要额外的计算，性能比较好。
如果后端不具备pinyin转换能力，那么前端自己也可以完成这个功能。

前端实现

可以采用 tiny-pinyin 或者 pinyin.js 前端库，在客户端实现汉字转拼音。

有了pinyin字段之后，前端的下拉框就可以依照汉字、拼音、拼音缩写的方式，实现备选项的过滤了。

options =  allCountries  
  .filter(  
    (c) =>  
      c.name.startsWith(s) ||  
      c.pinyin.startsWith(s) ||  
      c.pinyin_shortcut.startsWith(s) ||  
      c.pinyin.split(" ").join("").startsWith(s)  
  )  .map((c) => ({  
    label: c.name,  
    value: c.code,  
  }));