各种 UI 库的 Select，你们能不能人性化一点！
最近在云效上合并代码，本想着懒的目的输入了非连续的关键字搜索分支，结果...
大概逻辑就是，搜索时必须输入连续的字母，比如，要找 "master-alpha"分支，非要输入 master-al 才能搜到，像图中输入 "masal" 就完全搜索不到。这导致了很多场景下使用起来很不方便，例如我们只记得几个非连续的关键字，或者懒得打那么多连续的关键字来搜索，用户体验较差。
然后我又看了几个流行组件库的 Select。
Element-ui
Antd
Naive-ui
全军覆没！
那我们来自己实现一个吧！先来两个实战图。
不带高亮的非连续搜索
带高亮的非连续搜索
实现不带高亮的非连续搜索
以vue3+ElementUI为例，在这里将会用到一个小小的js库叫sdm2来实现非连续的字符串匹配。
视图部分
html
<el-select
v-model="value"
size="large"
placeholder="Filter options"
filterable
:filter-method="q => (query = q)">
<el-option
v-for="item in optionsComputed"
:key="item.value"
:value="item.value"
:label="item.label">
</el-option>
</el-select>没有什么特别的，就是加了个filterMethod函数将关键词赋值给query状态，然后optionsComputed按query值根据关键词进行筛选
js
import { match } from 'sdm2';
const options = [/* 选项列表 */];
const query = ref('');
const optionsComputed = computed(() => options.filter(({ label }) =>
// 使用sdm2的match函数筛选
match(label, query.value, {
// 忽略大小写匹配
ignoreCase: true,
}
)));就这么简单完成了。
实现带高亮的非连续搜索
视图部分
高亮部分使用v-html动态解析html字符串。
html
<el-select
v-model="value"
size="large"
placeholder="Filter options"
filterable
:filter-method="q => (query = q)">
<el-option
v-for="item in optionsComputed"
:key="item.value"
:value="item.value"
:label="item.label">
<div v-html="item.highlight"></div>
</el-option>
</el-select>为了让匹配到的关键字高亮，我们需要将匹配到的关键字转换为html字符串，并将高亮部分用<span class="highlight">包裹，最后用v-html动态解析。
js
import { filterMap } from 'sdm2';
const options = [/* 选项列表 */];
const query = ref('');
const optionsComputed = computed(() =>
// 为了过滤出选项，并将到的转换为html字符串，此时我们要用sdm2的filterMap函数
filterMap(options, query.value, {
ignoreCase: true,
// 把matchStr返回的字符串作为被匹配项
matchStr: ({ label }) => label,
// 匹配到后转换为html高亮字符串
onMatched: (matchedStr) => `<span class="highlight">${matchedStr}</span>`,
// 将匹配到的项转换转换为需要的格式，str为onMatched转换后的字符串，origin为数组的每项原始值
onMap: ({ str, origin }) => {
return {
highlight: str,
...origin
}
}
})
);然后一个带高亮的非连续搜索就完成了。
总结
这样你的搜索库就又更智能点了吧，然后各位 UI 库作者，你们也可以考虑考虑这个方案，或者有哪位朋友愿意的话也可以去为他们提一个issue或PR。
同时我们的轻量级请求策略库alovajs也是一个非常酷的js库，你可以通过简单配置参数，即可实现复杂请求如请求共享、分页请求、表单提交、断点续传等，无需编写大量代码，提高开发效率，应用性能，减轻服务端压力。
有任何问题，你可以加入以下群聊咨询，也可以在github 仓库中发布 Discussions，如果遇到问题，也请在github 的 issues中提交，我们会在最快的时间解决。
同时也欢迎贡献你的一份力量，请移步贡献指南。