可定制React自动完成搜索组件Turnstone实现示例
更新时间：2022年10月25日 15:33:10 作者：Jovie
这篇文章主要为大家介绍了可定制React自动完成搜索组件Turnstone实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
正文
一个高度可定制的、易于使用的React自动完成搜索组件。
特点
- 轻量级的React搜索框组件
- 用可定制的标题将来自多个API或其他数据源的搜索结果分组
- 指定列表框选项的最大数量，以及每组的加权显示比例
- 用你自己的React组件完全定制列表框选项。添加图片、图标、额外的子选项、按组或索引的不同视觉处理等等......
- 在输入的文本下面显示typeahead自动建议文本
- 使用各种CSS方法，包括CSS模块和Tailwind CSS，可轻松实现风格化。
- 在移动屏幕尺寸下，搜索输入可以很容易地固定在屏幕顶部，并有可定制的取消/返回按钮来退出。
- 多个回调，包括。
onSelect,onChange,onTab,onEnter以及更多... - 内置的WAI-ARIA可访问性
- 使用箭头、Tab和Enter键的键盘高亮和选择
- 自动缓存以减少数据的获取
- 退步文本输入，以减少数据的取用
- 可选的清除按钮（可定制）。
- 可定制的占位符文本
- 使用插件添加更多的功能
- 以及更多...
如何使用它
1.安装并导入Turnstone
# NPM $ npm i turnstone import React from 'react' import Turnstone from 'turnstone'
2.基本使用方法
const App = () => {
const listbox = {
data: ['react', 'vue', 'angular']
}
return (
<Turnstone listbox={listbox} />
)
}
3.默认的组件道具
autoFocus: false,
cancelButton: false,
cancelButtonAriaLabel: 'Cancel',
clearButton: false,
clearButtonAriaLabel: 'Clear contents',
debounceWait: 250,
defaultListboxIsImmutable: true,
disabled: false,
id: randomId(),
listboxIsImmutable: true,
matchText: false,
maxItems: 10,
minQueryLength: 1,
placeholder: '',
styles: {},
typeahead: true,
Cancel: () => 'Cancel',
Clear: () => '\u00d7'
预览
The postCustomizable Autocomplete Search Component For React - Turnstoneappeared first onReactScript.
以上就是可定制React自动完成搜索组件Turnstone实现示例的详细内容，更多关于React自动搜索组件Turnstone的资料请关注脚本之家其它相关文章！
相关文章
本篇文章主要介绍了react开发教程之React组件通信详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家介绍了React 中的重新渲染类组件及函数组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
React 最为核心的就是 Virtual DOM 和 Diff 算法，diff算法的基础是Virtual DOM，接下来通过本文给大家介绍React中diff算法的相关知识，对React中diff算法感兴趣的朋友跟随小编一起学习下吧2021-05-05
Fiber 可以理解为一个执行单元，每次执行完一个执行单元，React Fiber就会检查还剩多少时间，如果没有时间则将控制权让出去，然后由浏览器执行渲染操作，这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下2022-11-11
本文主要介绍了react组件多次渲染问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要为大家详细介绍了React纯前端模拟实现登录鉴权的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
本文主要介绍了React 数据共享useContext的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
前段时间接到这样一个需求,需要封装一个组件实现可编辑,这个到底有多通用呢,就是需要在普通的文字展示包括表格,列表等等,所以本文将给大家介绍如何基于react封装一个通用可编辑组件,需要的朋友可以参考下2024-02-02
react配置webpack-bundle-analyzer项目优化踩坑记录
这篇文章主要介绍了react配置webpack-bundle-analyzer项目优化踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了react路由v6版本NavLink的两个小坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论