react bootstrap typeahead

React Bootstrap 预输入

基于 React 的 typeahead，依赖 Bootstrap 进行样式设计，最初受到 Twitter 的 typeahead.js 的启发。它支持单选和多选，并且符合 WAI-ARIA 创作实践。尝试一下生动的例子。

请注意，文档和示例适用于最新版本，如果您使用的是过时版本，则可能不再适用。

安装

 npm install --save react-bootstrap-typeahead

或者

 yarn add react-bootstrap-typeahead

将该模块包含在您的项目中：

 import { Typeahead } from 'react-bootstrap-typeahead' ; // ES2015
var Typeahead = require ( 'react-bootstrap-typeahead' ) . Typeahead ; // CommonJS 

UMD构建

开发和生产版本包含在 NPM 包中。或者，您可以从 CDNJS 或 unpkg 获取它们。

文档

• 基本用法
• 数据
• 过滤
• 渲染
• 公共方法
• API 和道具
• 升级指南

CSS

虽然该组件主要依赖于 Bootstrap，但还需要一些额外的样式。您应该将提供的 CSS 文件包含在您的项目中：

 // Import as a module in your JS
import 'react-bootstrap-typeahead/css/Typeahead.css' ;

或者

 
< link
  rel =" stylesheet "
  href =" https://unpkg.com/react-bootstrap-typeahead/css/Typeahead.css "
/>

引导程序5

为了支持 Bootstrap 5，此软件包还包含一个名为Typeahead.bs5.css的 CSS 文件，该文件应与上面的基本 CSS 文件一起包含在内。

示例

尝试实时示例，其中还包括代码示例。如果您想修改示例，请克隆存储库并运行npm install和npm start来构建示例文件。然后，您可以在浏览器中本地打开 HTML 文件。

您还可以尝试以下沙箱示例：

• 大数据集的窗口化
• 异步分页
• 组合框
• 验证和反馈
• 自定义加载程序和清除按钮
• 使用可重新排序的拖放标记进行多项选择
• 多选期间保持菜单打开
• 带浮动标签的单选 (BS5)

如果您有对其他人有用的示例用例，请创建一个沙箱并提交拉取请求以将其添加到列表中！

浏览器支持

支持以下浏览器的最新版本：

• 铬合金
• 火狐浏览器
• 边缘
• 狩猎之旅

特别感谢 BrowserStack 提供跨浏览器测试支持。

执照

麻省理工学院