> [📢📢📢掘金2023年度人气创作者打榜中，快来帮我打榜吧～](https://activity.juejin.cn/rank/2023/writer/1538972010422872?utm_campaign=annual_2023&utm_medium=self_web_share&utm_source=%E5%8F%A4%E9%9F%B5) 各种 UI 库的 Select，你们能不能人性化一点！最近在云效上合并代码，本想着懒的目的输入了非连续的关键字搜索分支，结果... ![1.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2046c2a2473a41738cafb39f604533f1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=371&h=150&s=15246&e=gif&f=13&b=f1f5f6) 大概逻辑就是，搜索时必须输入连续的字母，比如，要找 “master-alpha”分支，非要输入 `master-al` 才能搜到，像图中输入 `masal` 就完全搜索不到。这导致了很多场景下使用起来很不方便，例如我们只记得几个非连续的关键字，或者懒得打那么多连续的关键字来搜索，用户体验较差。然后我又看了几个流行组件库的 Select。 **Element-ui** ![2.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2490f5279c1c4c68a2ea6739e942a576~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=371&h=216&s=51938&e=gif&f=21&b=fefefe) **Antd** ![3.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ff89b14cac1464994d20a15914778f5~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=371&h=216&s=30543&e=gif&f=20&b=fdfdfd) **Naive-ui** ![4.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95f90252e32944859f42bf5720dfdc2d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=371&h=216&s=31835&e=gif&f=16&b=fdfdfd) 全军覆没！那我们来自己实现一个吧！先来两个实战图。 **不带高亮的非连续搜索** ![6.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b01ae9d4b0c4d14a4835782a6e00608~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=371&h=216&s=22773&e=gif&f=18&b=fefefe) **带高亮的非连续搜索** ![5.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eb02858608624535bf73ae64d6f03186~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=371&h=216&s=21151&e=gif&f=17&b=fefefe) ## 实现不带高亮的非连续搜索以vue3+ElementUI为例，在这里将会用到一个小小的js库叫[sdm2](https://github.com/JOU-amjs/sdm2)来实现非连续的字符串匹配。 ### 视图部分 ```html

``` 没有什么特别的，就是加了个`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

``` 为了让匹配到的关键字高亮，我们需要将匹配到的关键字转换为html字符串，并将高亮部分用``包裹，最后用`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) => `${matchedStr}`, // 将匹配到的项转换转换为需要的格式，str为onMatched转换后的字符串，origin为数组的每项原始值 onMap: ({ str, origin }) => { return { highlight: str, ...origin } } }) ); ``` 然后一个带高亮的非连续搜索就完成了。 ## 总结 > [📢📢📢掘金2023年度人气创作者打榜中，快来帮我打榜吧～](https://activity.juejin.cn/rank/2023/writer/1538972010422872?utm_campaign=annual_2023&utm_medium=self_web_share&utm_source=%E5%8F%A4%E9%9F%B5) 这样你的搜索库就又更智能点了吧，然后各位 UI 库作者，你们也可以考虑考虑这个方案，或者有哪位朋友愿意的话也可以去为他们提一个issue或PR。同时我们的[轻量级请求策略库alovajs](https://alova.js.org)也是一个非常酷的js库，你可以通过简单配置参数，即可实现复杂请求如请求共享、分页请求、表单提交、断点续传等，无需编写大量代码，提高开发效率，应用性能，减轻服务端压力。有任何问题，你可以加入以下群聊咨询，也可以在[github 仓库中发布 Discussions](https://github.com/alovajs/alova/discussions)，如果遇到问题，也请在[github 的 issues](https://github.com/alovajs/alova/issues)中提交，我们会在最快的时间解决。 - [加入在 Discord 社区参与交流](https://discord.gg/S47QGJgkVb) - [加入微信群参与交流](https://alova.js.org/img/wechat_qrcode.jpg) 同时也欢迎贡献你的一份力量，请移步[贡献指南](https://alova.js.org/contributing/overview)。 ## 往期文章 - [alova来袭，你还在固守着axios吗？](https://juejin.cn/post/7301281320666693667) - [改变 axios 的用法后，我的工作效率提升了 3 倍](https://juejin.cn/post/7277029942298329125) - [如何让 axios 提升分页管理效率](https://juejin.cn/post/7271908000414302248) - [整会 promise 这 8 个高级用法，再被问倒来喷我](https://juejin.cn/post/7263089207128850489)