问题描述

一般情况下我们用 AsyncTypeahead， 结果往往是输入框传入关键字给 api, 然后显示 api 返回的结果列表。

但有一种情况非常特殊，假如 api 返回的结果字段有username， nickname 2个字段。要求是搜索关键字无论匹配到哪一个字段，都要返回到结果列表上，但只要选中一个结果后，输入框只显示 username 这个字段。

需求痛点

这难点是什么？难点是输入框只显示 username 这个字段。AsyncTypeahead 官方给出了_updateText 这个方法，可以做到改变输入框的显示值，但用起来过于麻烦。

我们决定用 labelkey 这个属性， 它代表了给每一个返回项设定一个 tag， 当选中一个选项之后，输入框就会只显示这个 tag 标签。

所以我们选择 传入一个方法， 让每个选项的 tag 等于 username 这个字段的值就好了。

结果正如我们预料的一样，选择某一个选项之后，输入框的值确实变成了这个选项的 username， 但问题又来了。

深入解析

AsyncTypeahead 自带了 tag 过滤器，当不设置 labelkey 的时候，它不会启动过滤器， 一旦设定了 labelkey， 过滤器会启动。它会自动过滤掉 tag 和输入的关键字 不匹配的选项。

也就是说， 如果有一条数据 nickname = jack， username = wang， 当你输入 jack 的时候， api确实返回了这一条数据，但是根据我们的 labelkey 的规则， 它的 tag = wang 了。所以就不再和 jack 匹配了，AsyncTypeahead 会自动过滤掉这一条数据，这肯定不是我们想看到的结果。怎么办呢？

解决方案

AsyncTypeahead 本身并没有类似 disable filter 之类的属性可以用，但是它有一个 filterBy 的 props 可以利用。

也就是说当你传入 多个字段的时候， 它便会去匹配多个字段的结果，如果匹配成功，就会被保留下来。那么前面的列子，我们传入 filterBy = [‘username’ ，‘nickname’] 2个字段，就可以完美解决我们的难题了。