可定制React自動完成搜索組件Turnstone實現(xiàn)示例

更新時間：2022年10月25日 15:33:10 作者：Jovie

這篇文章主要為大家介紹了可定制React自動完成搜索組件Turnstone實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

一個高度可定制的、易于使用的React自動完成搜索組件。

特點

輕量級的React搜索框組件
用可定制的標題將來自多個API或其他數(shù)據(jù)源的搜索結(jié)果分組
指定列表框選項的最大數(shù)量，以及每組的加權(quán)顯示比例
用你自己的React組件完全定制列表框選項。添加圖片、圖標、額外的子選項、按組或索引的不同視覺處理等等......
在輸入的文本下面顯示typeahead自動建議文本
使用各種CSS方法，包括CSS模塊和Tailwind CSS，可輕松實現(xiàn)風格化。
在移動屏幕尺寸下，搜索輸入可以很容易地固定在屏幕頂部，并有可定制的取消/返回按鈕來退出。
多個回調(diào)，包括。onSelect,onChange,onTab,onEnter 以及更多...
內(nèi)置的WAI-ARIA可訪問性
使用箭頭、Tab和Enter鍵的鍵盤高亮和選擇
自動緩存以減少數(shù)據(jù)的獲取
退步文本輸入，以減少數(shù)據(jù)的取用
可選的清除按鈕（可定制）。
可定制的占位符文本
使用插件添加更多的功能
以及更多...

如何使用它

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實現(xiàn)示例的詳細內(nèi)容，更多關(guān)于React自動搜索組件Turnstone的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

React18新增特性介紹
react歷次版本迭代主要想解決的是兩類導致網(wǎng)頁卡頓的問題，分別是cpu密集型任務(wù)和io密集型任務(wù)導致的卡頓問題，react18新增特性就是為了解決上述問題
2022-09-09
react的嚴格模式和解決react useEffect執(zhí)行兩次問題
文章總結(jié)：本文詳細探討了React中useEffect執(zhí)行兩次的問題,主要歸因于React的嚴格模式,嚴格模式在開發(fā)模式下會故意重復調(diào)用一些生命周期方法,以幫助開發(fā)者發(fā)現(xiàn)潛在的問題,包括不安全的生命周期、過時的ref API、廢棄的findDOMNode方法、意外的副作用等
2025-01-01
React中如何處理承諾demo
這篇文章主要為大家介紹了React中如何處理承諾demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
React 源碼調(diào)試方式
這篇文章主要為大家介紹了React源碼調(diào)試方式實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
React class和function的區(qū)別小結(jié)
Class組件和Function組件是React中創(chuàng)建組件的兩種主要方式,本文主要介紹了React class和function的區(qū)別小結(jié),具有一定的參考價值,感興趣的可以了解一下
2023-10-10
React?腳手架配置代理完整指南(最新推薦)
本文詳細介紹了React腳手架配置代理的多種方式,文章還討論了常見問題的解決方案,如跨域問題、WebSocket代理和錯誤處理,并提供了生產(chǎn)環(huán)境配置建議和調(diào)試技巧,感興趣的朋友一起看看吧
2024-12-12
React18新特性startTransition詳解
React18的新特性startTransition主要是為了優(yōu)化用戶體驗,通過標記低優(yōu)先級的更新任務(wù),如頁面重渲染,使它們不會阻塞高優(yōu)先級的緊急任務(wù)如用戶輸入響應(yīng),本文介紹React18新特性startTransition,感興趣的朋友跟隨小編一起看看吧
2024-09-09
如何使用React構(gòu)建一個高效的視頻上傳組件
本文介紹了如何使用React構(gòu)建一個高效的視頻上傳組件,包括基礎(chǔ)概念、常見問題與解決方案以及易錯點,通過實際代碼案例,展示了如何實現(xiàn)文件大小和格式驗證、上傳進度顯示等功能,并詳細解釋了跨域請求和并發(fā)上傳控制等技術(shù)細節(jié)
2025-01-01
react實現(xiàn)路由攔截的示例代碼
這篇文章主要介紹react實現(xiàn)路由攔截的,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2024-02-02
ReactJs快速入門教程(精華版)
React 起源于 Facebook 的內(nèi)部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設(shè) Instagram 的網(wǎng)站.這篇文章主要介紹了ReactJs快速入門教程(精華版)的相關(guān)資料,需要的朋友可以參考下
2016-11-11