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

您可能感兴趣的文章:

JavaScript的React Web库的理念剖析及基础上手指南
这篇文章主要介绍了JavaScript的React Web库的理念剖析及基础上手指南,React Web的目的即是把本地的React Native应用程序项目变为Web应用程序,需要的朋友可以参考下
2016-05-05
react koa rematch 如何打造一套服务端渲染架子
这篇文章主要介绍了react koa rematch 如何打造一套服务端渲染架子，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06
React Native 环境搭建的教程
本篇文章主要介绍了React Native 环境搭建的教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
React 如何向url中添加参数
这篇文章主要介绍了React 如何向url中添加参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
React Native自定义路由管理的深入理解
路由管理的功能主要指的页面跳转、goBack、带参数跳转等功能,这篇文章主要给大家介绍了关于React Native自定义路由管理的相关资料,需要的朋友可以参考下
2021-08-08
useCallback和useMemo的正确用法详解
这篇文章主要为大家介绍了useCallback和useMemo的正确用法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
JavaScript中的useRef 和 useState介绍
这篇文章主要给大家分享的是 JavaScript中的useRef 和 useState介绍，下列文章，我们将学习 useRef 和 useState hook是什么，它们的区别以及何时使用哪个。这篇文章中的代码示例将仅涉及功能组件，但是大多数差异和用途涵盖了类和功能组件,需要的朋友可以参考一下
2021-11-11
React+TypeScript项目中使用CodeMirror的步骤
CodeMirror被广泛应用于许多Web应用程序和开发工具，之前做需求用到过codeMirror这个工具，觉得还不错，功能很强大，所以记录一下改工具的基础用法，对React+TypeScript项目中使用CodeMirror的步骤感兴趣的朋友跟随小编一起看看吧
2023-07-07
React Fiber与调和深入分析
Fiber可以理解为一个执行单元，每次执行完一个执行单元，React Fiber就会检查还剩多少时间，如果没有时间则将控制权让出去，然后由浏览器执行渲染操作，这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下
2022-11-11
Remix中mdx table不支持表格解决
这篇文章主要为大家介绍了Remix中mdx table不支持表格问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05