# @bilions/search-js 中文文档 规范地址：https://npmcn.com/package/%40bilions/search-js/ 版本：0\.5\.5 npm 元数据更新时间：2023-04-08T12:31:30.417Z 中文译文更新时间：2026-11-08T02:26:22.485Z 软件包许可：ISC 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40bilions/search-js 原文对照：https://npmcn.com/package/%40bilions/search-js/?lang=original 项目主页：https://github.com/necessarylion/search-js#readme 源码仓库：https://github.com/necessarylion/search-js ## 关键信息（来自 npm 元数据） - 包体积（解压后）：66.6 kB，20 个文件 - 模块格式：CommonJS - TypeScript 类型：包内自带 - 运行依赖：0 个 - 首次发布：2023-03-25T12:02:12.131Z - 最新版本发布：2023-04-08T12:31:30.312Z - 近 30 天下载量：2764（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：24（近 12 个月 0 个） ## 中文简介 实例搜索 UI 组件 ## 安装 ```sh npm install @bilions/search-js ``` 也可以使用：`pnpm add @bilions/search-js`、`yarn add @bilions/search-js`、`bun add @bilions/search-js` ## README ## 搜索联署材料 ![build status](https://github.com/necessarylion/search-js/actions/workflows/build.yml/badge.svg) [![npm version](https://badge.fury.io/js/@bilions%2Fsearch-js.svg)](https://badge.fury.io/js/@bilions%2Fsearch-js) [![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC) 任何 Javascript 框架的实例搜索 UI 组件 . 兼容 - 反应 - 阴道 - 角质 ### 目录 - [安装](https://npmcn.com/package/%40bilions/search-js/#readme-installation) - [通过 cdn](https://npmcn.com/package/%40bilions/search-js/#readme-install-via-cdn) - [通过 npm](https://npmcn.com/package/%40bilions/search-js/#readme-install-via-npm) - [使用量](https://npmcn.com/package/%40bilions/search-js/#readme-usage) - [Javascript](https://npmcn.com/package/%40bilions/search-js/#readme-javascript) - [字体](https://npmcn.com/package/%40bilions/search-js/#readme-typescript) - [使用 API](https://npmcn.com/package/%40bilions/search-js/#readme-usage-with-api-call) - [选项](https://npmcn.com/package/%40bilions/search-js/#readme-available-options) - [职能](https://npmcn.com/package/%40bilions/search-js/#readme-available-functions) - [主题](https://npmcn.com/package/%40bilions/search-js/#readme-theme) - [自定义 主题](https://npmcn.com/package/%40bilions/search-js/#readme-custom-theme-color) ### 安装 #### 通过 cdn 安装 ```html ``` #### 通过 npm 安装 `npm install @bilions/search-js` #### 使用量 ###### Javascript ```js import SearchJS from '@bilions/search-js' const data = [ { title: 'Validation', description: 'Create validation easily using validator', route: '/validation', }, { title: 'Request', description: 'Http request', route: '/request', }, ] const searchJs = SearchJS({ data, theme: '#FF2E1F', width: '600px', positionTop: '85px', search: { placeholder: 'Search docs', }, onSelected: (i) => { console.log(i) }, onSearch: (keyword) => { console.log(keyword) }, }) searchJs.open() ``` ###### 字体 ```js import SearchJS, { SearchJSConfig, SearchJSItem } from '@bilions/search-js' const config: SearchJSConfig = { data: [ { title: 'Validation', description: 'Create validation easily using validator', route: '/validation', }, { title: 'Request', description: 'Http request', route: '/request', }, ], theme: '#FF2E1F', width: '600px', positionTop: '85px', search: { placeholder: 'Search docs', }, onSelected: (value: SearchJSItem) => { console.log(value) }, onSearch: (keyword) => { console.log(keyword) }, } const searchJs = SearchJS(config) searchJs.open() ``` #### API 调用 ```js async function getFromApi(keyword = '') { let res = await fetch('https://dummyjson.com/products/search?q=' + keyword) let json = await res.json() return json.products } const searchJs = SearchJS({ theme: '#FF2E1F', width: '600px', darkMode: false, positionTop: '50px', data: [], search: { placeholder: 'Search products', }, onSelected: (route) => { console.log(route) }, onSearch: (keyword) => { return getFromApi(keyword) }, }) ``` #### 可用选项 | **名称** | **需求** | **说明** | | --- | :-: | --- | | `data` | 对 | 要搜索的数据 | | `data.title` | 对 | 数据标题 | | `data.description` | 无 | 数据描述 | | `element` | 无 | 附加搜索 -js 的元素 | | `theme` | 无 | 颜色代码或主题名称( e)`#FF2E1F`, (中文(简体) ), `github-light`, (中文(简体) ), `github-dark`(中文(简体) ) | | `darkMode` | 无 | 默认 `false`设置 `true` 用于暗模式 | | `width` | 无 | 模式宽度默认值 (400px) | | `search` | | | | `search.icon` | 无 | 搜索输入的 svg 图标字符串 | | `search.placeholder` | 无 | 搜索输入的占位符文本(默认) `Search`(中文(简体) ) | | `positionTop` | 无 | 默认 `85px` | | `onSelected` | 对 | 选中项目后触发的回调函数 | | `onSearch` | 无 | 3⁄4 ̄ ̧漯b | #### 现有职能 - `open()` 函数将触发打开搜索菜单 - `close()` 函数将触发关闭搜索菜单 - 或者按键 `cmd + k` 或者说 `ctrl + k` 打开搜索菜单,并 `ESC` 关闭菜单 #### 主题 #### 备妥的主题 - `github-dark` - `github-light` ##### Github Dark (github- dark) (英语) ![](https://raw.githubusercontent.com/necessarylion/search-js/main/demo/github-dark.png) ##### Github 光( 光) ![](https://raw.githubusercontent.com/necessarylion/search-js/main/demo/github-light.png) ##### 光线 有颜色代码的主题 ![](https://raw.githubusercontent.com/necessarylion/search-js/main/demo/dark-theme.png) ##### 阴暗 有颜色代码的主题 ![](https://raw.githubusercontent.com/necessarylion/search-js/main/demo/light-theme.png) #### 自定义主题颜色 覆盖自定义主题颜色的 css 变量下方 . ###### 默认光线模式 ```css root { --search-js-backdrop-bg: rgba(101, 108, 133, 0.8); --search-js-modal-bg: #f5f6f7; --search-js-modal-box-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5), 0 3px 8px 0 #555a64; --search-js-modal-footer-box-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, 0.12); --search-js-keyboard-button-box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4); --search-js-keyboard-button-bg: linear-gradient(-225deg, #d5dbe4, #f8f8f8); --search-js-search-input-bg: white; --search-js-item-bg: white; --search-js-text-color: #969faf; --search-js-input-placeholder-color: #969faf; --search-js-item-box-shadow: 0 1px 3px 0 #d4d9e1; } ``` ###### 默认黑暗模式 ```css root { --search-js-backdrop-bg: rgba(47, 55, 69, 0.7); --search-js-modal-bg: #1b1b1d; --search-js-modal-box-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309; --search-js-modal-footer-box-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2); --search-js-keyboard-button-box-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, 0.3); --search-js-keyboard-button-bg: linear-gradient(-26.5deg, transparent 0%, transparent 100%); --search-js-search-input-bg: black; --search-js-item-bg: #1c1e21; --search-js-text-color: #b3b3b3; --search-js-input-placeholder-color: #aeaeae; --search-js-item-box-shadow: none; } ``` 受爱高丽所启发 ## 常见问题 ### @bilions/search-js 是什么？ 实例搜索 UI 组件 ### 如何安装 @bilions/search-js？ 在项目目录运行 npm install @bilions/search-js，或使用 pnpm add / yarn add / bun add。 ### @bilions/search-js 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @bilions/search-js 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @bilions/search-js 可以商用吗？ @bilions/search-js 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @bilions/search-js 的下载量有多少？ 根据 npm 官方下载统计，@bilions/search-js 在 2026/10/08 – 2026/11/06 这 30 天内被下载 2,764 次，日均约 92 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @bilions/search-js 还在维护吗？ 最新版本 0\.5\.5 发布于 2023/04/08（3 年前）；至今共发布 24 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/03/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。