可定制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的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React18新增特性介绍
react历次版本迭代主要想解决的是两类导致网页卡顿的问题，分别是cpu密集型任务和io密集型任务导致的卡顿问题，react18新增特性就是为了解决上述问题
2022-09-09
react的严格模式和解决react useEffect执行两次问题
文章总结：本文详细探讨了React中useEffect执行两次的问题,主要归因于React的严格模式,严格模式在开发模式下会故意重复调用一些生命周期方法,以帮助开发者发现潜在的问题,包括不安全的生命周期、过时的ref API、废弃的findDOMNode方法、意外的副作用等
2025-01-01
React中如何处理承诺demo
这篇文章主要为大家介绍了React中如何处理承诺demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
React 源码调试方式
这篇文章主要为大家介绍了React源码调试方式实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
React class和function的区别小结
Class组件和Function组件是React中创建组件的两种主要方式,本文主要介绍了React class和function的区别小结,具有一定的参考价值,感兴趣的可以了解一下
2023-10-10
React 脚手架配置代理完整指南(最新推荐)
本文详细介绍了React脚手架配置代理的多种方式,文章还讨论了常见问题的解决方案,如跨域问题、WebSocket代理和错误处理,并提供了生产环境配置建议和调试技巧,感兴趣的朋友一起看看吧
2024-12-12
React18新特性startTransition详解
React18的新特性startTransition主要是为了优化用户体验,通过标记低优先级的更新任务,如页面重渲染,使它们不会阻塞高优先级的紧急任务如用户输入响应,本文介绍React18新特性startTransition,感兴趣的朋友跟随小编一起看看吧
2024-09-09
如何使用React构建一个高效的视频上传组件
本文介绍了如何使用React构建一个高效的视频上传组件,包括基础概念、常见问题与解决方案以及易错点,通过实际代码案例,展示了如何实现文件大小和格式验证、上传进度显示等功能,并详细解释了跨域请求和并发上传控制等技术细节
2025-01-01
react实现路由拦截的示例代码
这篇文章主要介绍react实现路由拦截的,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-02-02
ReactJs快速入门教程(精华版)
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站.这篇文章主要介绍了ReactJs快速入门教程(精华版)的相关资料,需要的朋友可以参考下
2016-11-11