# @baselayer-sdk/autocomplete 中文文档 规范地址：https://npmcn.com/package/%40baselayer-sdk/autocomplete/ 版本：0\.10\.0 npm 元数据更新时间：2026-10-29T02:49:34.868Z 中文译文更新时间：2026-11-07T17:39:55.949Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40baselayer-sdk/autocomplete 原文对照：https://npmcn.com/package/%40baselayer-sdk/autocomplete/?lang=original 项目主页：https://github.com/osiris-ratings/baselayer-autocomplete-typescript#readme 源码仓库：https://github.com/osiris-ratings/baselayer-autocomplete-typescript ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.7 MB，23 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - Node.js 要求：\>=20 - 运行依赖：1 个 - peer 依赖：react ^18\.2\.0 \|\| ^19\.0\.0，react-dom ^18\.2\.0 \|\| ^19\.0\.0 - 首次发布：2026-09-24T21:41:46.163Z - 最新版本发布：2026-10-29T02:49:34.415Z - 近 30 天下载量：4231（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：12（近 12 个月 12 个） ## 中文简介 浏览器的 Baselayer 业务自动完成: 无框架客户端, React shooks 和 有样式的打字头, 以及服务器侧会话薄荷帮助器 ## 安装 ```sh npm install @baselayer-sdk/autocomplete ``` 也可以使用：`pnpm add @baselayer-sdk/autocomplete`、`yarn add @baselayer-sdk/autocomplete`、`bun add @baselayer-sdk/autocomplete` ## README # @ baselayer- sdk/ 自动完成 由Baselayer的注册人支持,自动完成自己的产品 帮助打字的人选择正确的业务。 每个建议都是 已经与周围实体有联系的教会实体:企业 携带注册的州、官员、代理人和地址以及 `business_token` 让你的基地管理员的搜索 完全是为了那个事业. 它找到一种三种商业方式: 以它的名字, 由在 它,或者通过一个地址 它存档。 不管怎么说,挑剔就是生意. > **释前.** 至1.0,一个突破的更改会撞出小版本. 1.0冻结API. ![The typeahead for "harbor concrete pum"](https://npmcn.com/package/%40baselayer-sdk/autocomplete/docs/images/typeahead-harbor-concrete-pum.png) - **无框架核心** (单位:千美元)`@baselayer-sdk/autocomplete`: 会话,刷新, 退后,每个拒绝 API可以回答,为你处理. - **反应** (单位:千美元)`@baselayer-sdk/autocomplete/react`:无头钩,并有风格 组件, `BusinessAutocomplete`, (中文(简体) ), `PersonAutocomplete` 财务报告和审定财务报表 `AddressAutocomplete`准备离开盒子, 并恢复到结束. - **服务器助手** (单位:千美元)`@baselayer-sdk/autocomplete/server`: 一个终点 您的后端添加了此选项, 因此您的 API 密钥永远不会到达浏览器 . ## 安装 ```sh npm install @baselayer-sdk/autocomplete ``` 反应 18 或 19 是可选的对等点; 核心和服务器助手需要 无论是反应还是DOM. ## 如何融为一体 ![The browser, your backend and Baselayer, and the five hops between them](https://npmcn.com/package/%40baselayer-sdk/autocomplete/docs/images/architecture.svg) 1. 当球场得到焦点, SDK 询问您的结束点一个会话 。  自己的饼干认证电话. 2. 您的后端用您的 API 密钥将它薄荷化, 转发页面 `Origin`, (中文(简体) ), 并返回 Baselayer 的答案不变. 3. 每个按键都直接用页眉向下划线: 没有饼干,没有钥匙. 4. 挑一排手拿起你的形体 `business_token`。 。 。 . 5. 您的后端发送符号 `POST /searches`因此,搜索 解决了被选中的事务. 你的API密钥留在后端 浏览器只持有短寿命 绑定在您的页面源头并带有自身请求的会话 预算. 要求重点提交: ![Every request between the browser, your backend and Baselayer](https://npmcn.com/package/%40baselayer-sdk/autocomplete/docs/images/request-flow.svg) 两幅图都是网站的自有图,由 : `pnpm diagrams`页:1 当文件落在组件后方时, 测试失败 . ## 1\. 在后端添加薄荷端点 Next.js (App路由器), 以 `app/api/ac-session/route.ts`数字 : ```ts import { createMintHandler } from "@baselayer-sdk/autocomplete/server"; export const POST = createMintHandler({ apiKey: process.env.BASELAYER_API_KEY!, allowedOrigins: ["https://app.example.com"], }); ``` 快捷键 : ```ts import { mintForOrigin } from "@baselayer-sdk/autocomplete/server"; app.post("/api/ac-session", requireLogin, async (req, res) => { const origin = req.get("Origin"); if (!origin || !ALLOWED.has(origin)) { return res.status(403).end(); } const out = await mintForOrigin({ apiKey: process.env.BASELAYER_API_KEY!, origin, }); res.status(out.status).set(out.headers).json(out.body); }); ``` 任何其他后端: 见 [薄荷终端合同](https://npmcn.com/package/%40baselayer-sdk/autocomplete/docs/mint-endpoint.md)。 。 。 . 将路线放在自己认证的后面, 就像其它的 API : 每场比赛,你的终点薄荷 都与你的组织池无关. ## 2\. 减少部分 ```tsx import { useState } from "react"; import { BusinessAutocomplete } from "@baselayer-sdk/autocomplete/react"; import "@baselayer-sdk/autocomplete/react/styles.css"; export function LegalNameField() { const [name, setName] = useState(""); const [businessToken, setBusinessToken] = useState(); return ( { setName(value); setBusinessToken(undefined); // an edit is no longer the pick }} onPick={(_, pick) => setBusinessToken(pick.businessToken)} /> ); } ``` `id` 种子组合框的 id: 输入是 `${id}-input`标签 `${id}-label` 菜单 `${id}-menu`字段被控制 : `value` 实值 还有你 `onChange` 报告打字。 一通电话 `onChange` 与行 那么,犬形名称 `onPick(suggestion, pick)`,所以清除符号在 `onChange`,如上,保持选择。 一个模糊的从不挑剔. 其中一个就是连接它: - `mintUrl` 财务报告和审定财务报表 `baseUrl`:你的终点,用你自己的饼干 (单位:千美元)`defaultMint(mintUrl)`, (中文(简体) ), `credentials: "same-origin"`) (中文(简体) ). - `mint` 财务报告和审定财务报表 `baseUrl`: 属于您的 `MintFunction`,任何其他电话. - `client`,没有 `baseUrl`: 客户端 `createAutocompleteClient`, (中文(简体) ), 共享到多个字段; 组件从不重置它获得的客户端. 第一个 `mint` 或者说 `mintUrl` 用于组件的生命; 新的 `baseUrl` 重新创建其客户端。 其余是可选的: - `mintOn` (单位:千美元)`"keystroke"`当会话定了的时候 `MINT_TIMINGS` (类型) `MintTiming`) (中文(简体) ). `keystroke` 薄荷在第一个 按键中键, 重排打字的其余部分, 因此单击该类型 无所花去薄荷; `focus` 薄荷随着田地的集中 所以 第一项答复只涉及其建议; `request` 薄荷与第一个 请求,答案等待. - `enabled` (单位:千美元)`true`: 关闭, 字段是一个简单的输入; 没有什么是刻薄的 而不问任何问题. - `limit` (单位:千美元)`5`,或会议次数最多时: a. 键弦,从1到20的整数,不超过会话次数最多; 在发送之前, 任何其它内容都会被拒绝, 没有打开菜单. - `minChars` (单位:千美元)`3`:在按键被发送前被修剪字符. - `debounceMs` (单位:千美元)`250`:按键键发出前的暂停;a 新的按键键取消 . - `filters`: 缩小每个查询发送的过滤器。 虽然文字比较短 并且菜单要求当事人 继续打入( n)`messages.filtersNeedMore`,则字符不变 缺少,如果你想说一个数字); a `client` 你通过自己的 `onShortStem` (单位:千美元)[过滤器](https://npmcn.com/package/%40baselayer-sdk/autocomplete/docs/headless.md#filters)) (中文(简体) ). - `onUnavailable({ unavailable })`:当部署停止时呼叫 能够薄荷(503代码481),并在可以时再次; 使你的平地 同时输入. - `list`:按以下顺序排列: 企业的官员和代理人`people`) 及其定义 `addresses`无 默认,每行都是它一直以来唯一的选项 (单位:千美元)[一个商业行的行](https://npmcn.com/package/%40baselayer-sdk/autocomplete/docs/entities.md#a-business-rows-lines)) (中文(简体) ). - `enabledLines` (单位:千美元)`["business"]`和 `onPickEntity`: 哪些行可以选择. 名称 `person` 或者说 `address` 警官或被选中的住址也会去 `onPickEntity` 作为 `EntityPick`,则需要 (单位:千美元)[选择什么](https://npmcn.com/package/%40baselayer-sdk/autocomplete/docs/entities.md#what-can-be-picked)) (中文(简体) ). - `showSelection` (单位:千美元)`true`:在选定军官或地址后,一行 在字段名称下 (单位:千美元)[球场下的一行](https://npmcn.com/package/%40baselayer-sdk/autocomplete/docs/entities.md#the-line-under-the-field)) (中文(简体) ). - `iconSegments` 财务报告和审定财务报表 `icons`: 带图标的片段(无 默认; `["name", "address"]` 在名称和地址之前绘制一个 和你自己的图标,按实体或实体和角色,或 `false` 无 (单位:千美元)[图标](https://npmcn.com/package/%40baselayer-sdk/autocomplete/docs/entities.md#icons)) (中文(简体) ). - `include`:自动完成服务为每行扩展的关联实体, 默认情况下 `layout` 地点和地点 `list` 列表。 自己画行 与 `renderRow` 上面写着: `include={["people"]}`。 。 。 . - `label`: 默认文字 `