喊话各大流行UI库，你们的Select组件到底行不行啊？

各种 UI 库的 Select，你们能不能人性化一点！

最近在云效上合并代码，本想着懒的目的输入了非连续的关键字搜索分支，结果...

大概逻辑就是，搜索时必须输入连续的字母，比如，要找 “master-alpha”分支，非要输入 master-al 才能搜到，像图中输入 “masal” 就完全搜索不到。这导致了很多场景下使用起来很不方便，例如我们只记得几个非连续的关键字，或者懒得打那么多连续的关键字来搜索，用户体验较差。

然后我又看了几个流行组件库的 Select。

Element-ui

Antd

Naive-ui

全军覆没！

那我们来自己实现一个吧！先来两个实战图。

不带高亮的非连续搜索

带高亮的非连续搜索

实现不带高亮的非连续搜索

以vue3+ElementUI为例，在这里将会用到一个小小的js库叫sdm2来实现非连续的字符串匹配。

视图部分

<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值根据关键词进行筛选

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字符串。

<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字符串，并将高亮部分用包裹，最后用v-html动态解析。

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) => `${matchedStr}`,

// 将匹配到的项转换转换为需要的格式，str为onMatched转换后的字符串，origin为数组的每项原始值
onMap: ({ str, origin }) => {
return {
highlight: str,

        ...origin

      }

    }

  })

);

然后一个带高亮的非连续搜索就完成了。

总结

这样你的搜索库就又更智能点了吧，然后各位 UI 库作者，你们也可以考虑考虑这个方案，或者有哪位朋友愿意的话也可以去为他们提一个issue或PR。