可定制React自動(dòng)完成搜索組件Turnstone實(shí)現(xiàn)示例
更新時(shí)間：2022年10月25日 15:33:10 作者：Jovie
這篇文章主要為大家介紹了可定制React自動(dòng)完成搜索組件Turnstone實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
正文
一個(gè)高度可定制的、易于使用的React自動(dòng)完成搜索組件。
特點(diǎn)
- 輕量級(jí)的React搜索框組件
- 用可定制的標(biāo)題將來(lái)自多個(gè)API或其他數(shù)據(jù)源的搜索結(jié)果分組
- 指定列表框選項(xiàng)的最大數(shù)量，以及每組的加權(quán)顯示比例
- 用你自己的React組件完全定制列表框選項(xiàng)。添加圖片、圖標(biāo)、額外的子選項(xiàng)、按組或索引的不同視覺(jué)處理等等......
- 在輸入的文本下面顯示typeahead自動(dòng)建議文本
- 使用各種CSS方法，包括CSS模塊和Tailwind CSS，可輕松實(shí)現(xiàn)風(fēng)格化。
- 在移動(dòng)屏幕尺寸下，搜索輸入可以很容易地固定在屏幕頂部，并有可定制的取消/返回按鈕來(lái)退出。
- 多個(gè)回調(diào)，包括。
onSelect,onChange,onTab,onEnter以及更多... - 內(nèi)置的WAI-ARIA可訪問(wèn)性
- 使用箭頭、Tab和Enter鍵的鍵盤(pán)高亮和選擇
- 自動(dòng)緩存以減少數(shù)據(jù)的獲取
- 退步文本輸入，以減少數(shù)據(jù)的取用
- 可選的清除按鈕（可定制）。
- 可定制的占位符文本
- 使用插件添加更多的功能
- 以及更多...
如何使用它
1.安裝并導(dǎo)入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.默認(rèn)的組件道具
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'
預(yù)覽
The postCustomizable Autocomplete Search Component For React - Turnstoneappeared first onReactScript.
以上就是可定制React自動(dòng)完成搜索組件Turnstone實(shí)現(xiàn)示例的詳細(xì)內(nèi)容，更多關(guān)于React自動(dòng)搜索組件Turnstone的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
react歷次版本迭代主要想解決的是兩類(lèi)導(dǎo)致網(wǎng)頁(yè)卡頓的問(wèn)題，分別是cpu密集型任務(wù)和io密集型任務(wù)導(dǎo)致的卡頓問(wèn)題，react18新增特性就是為了解決上述問(wèn)題2022-09-09
react的嚴(yán)格模式和解決react useEffect執(zhí)行兩次問(wèn)題
文章總結(jié)：本文詳細(xì)探討了React中useEffect執(zhí)行兩次的問(wèn)題,主要?dú)w因于React的嚴(yán)格模式,嚴(yán)格模式在開(kāi)發(fā)模式下會(huì)故意重復(fù)調(diào)用一些生命周期方法,以幫助開(kāi)發(fā)者發(fā)現(xiàn)潛在的問(wèn)題,包括不安全的生命周期、過(guò)時(shí)的ref API、廢棄的findDOMNode方法、意外的副作用等2025-01-01
這篇文章主要為大家介紹了React中如何處理承諾demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了React源碼調(diào)試方式實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
React class和function的區(qū)別小結(jié)
Class組件和Function組件是React中創(chuàng)建組件的兩種主要方式,本文主要介紹了React class和function的區(qū)別小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
本文詳細(xì)介紹了React腳手架配置代理的多種方式,文章還討論了常見(jiàn)問(wèn)題的解決方案,如跨域問(wèn)題、WebSocket代理和錯(cuò)誤處理,并提供了生產(chǎn)環(huán)境配置建議和調(diào)試技巧,感興趣的朋友一起看看吧2024-12-12
React18的新特性startTransition主要是為了優(yōu)化用戶(hù)體驗(yàn),通過(guò)標(biāo)記低優(yōu)先級(jí)的更新任務(wù),如頁(yè)面重渲染,使它們不會(huì)阻塞高優(yōu)先級(jí)的緊急任務(wù)如用戶(hù)輸入響應(yīng),本文介紹React18新特性startTransition,感興趣的朋友跟隨小編一起看看吧2024-09-09
如何使用React構(gòu)建一個(gè)高效的視頻上傳組件
本文介紹了如何使用React構(gòu)建一個(gè)高效的視頻上傳組件,包括基礎(chǔ)概念、常見(jiàn)問(wèn)題與解決方案以及易錯(cuò)點(diǎn),通過(guò)實(shí)際代碼案例,展示了如何實(shí)現(xiàn)文件大小和格式驗(yàn)證、上傳進(jìn)度顯示等功能,并詳細(xì)解釋了跨域請(qǐng)求和并發(fā)上傳控制等技術(shù)細(xì)節(jié)2025-01-01
這篇文章主要介紹react實(shí)現(xiàn)路由攔截的,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02
React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC 框架，都不滿意，就決定自己寫(xiě)一套，用來(lái)架設(shè) Instagram 的網(wǎng)站.這篇文章主要介紹了ReactJs快速入門(mén)教程(精華版)的相關(guān)資料,需要的朋友可以參考下2016-11-11