可定制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)題將來自多個(gè)API或其他數(shù)據(jù)源的搜索結(jié)果分組
指定列表框選項(xiàng)的最大數(shù)量，以及每組的加權(quán)顯示比例
用你自己的React組件完全定制列表框選項(xiàng)。添加圖片、圖標(biāo)、額外的子選項(xiàng)、按組或索引的不同視覺處理等等......
在輸入的文本下面顯示typeahead自動(dòng)建議文本
使用各種CSS方法，包括CSS模塊和Tailwind CSS，可輕松實(shí)現(xiàn)風(fēng)格化。
在移動(dòng)屏幕尺寸下，搜索輸入可以很容易地固定在屏幕頂部，并有可定制的取消/返回按鈕來退出。
多個(gè)回調(diào)，包括。onSelect,onChange,onTab,onEnter 以及更多...
內(nèi)置的WAI-ARIA可訪問性
使用箭頭、Tab和Enter鍵的鍵盤高亮和選擇
自動(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開發(fā)教程之React 組件之間的通信方式
本篇文章主要介紹了react開發(fā)教程之React組件通信詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
React?中的重新渲染類組件及函數(shù)組件
這篇文章主要為大家介紹了React?中的重新渲染類組件及函數(shù)組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
深入淺析React中diff算法
React 最為核心的就是 Virtual DOM 和 Diff 算法，diff算法的基礎(chǔ)是Virtual DOM，接下來通過本文給大家介紹React中diff算法的相關(guān)知識(shí)，對(duì)React中diff算法感興趣的朋友跟隨小編一起學(xué)習(xí)下吧
2021-05-05
React Fiber源碼深入分析
Fiber 可以理解為一個(gè)執(zhí)行單元，每次執(zhí)行完一個(gè)執(zhí)行單元，React Fiber就會(huì)檢查還剩多少時(shí)間，如果沒有時(shí)間則將控制權(quán)讓出去，然后由瀏覽器執(zhí)行渲染操作，這篇文章主要介紹了React Fiber架構(gòu)原理剖析,需要的朋友可以參考下
2022-11-11
react組件多次渲染問題的解決
本文主要介紹了react組件多次渲染問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
React純前端模擬實(shí)現(xiàn)登錄鑒權(quán)
這篇文章主要為大家詳細(xì)介紹了React純前端模擬實(shí)現(xiàn)登錄鑒權(quán)的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04
React?數(shù)據(jù)共享useContext的實(shí)現(xiàn)
本文主要介紹了React?數(shù)據(jù)共享useContext的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
基于react封裝一個(gè)通用可編輯組件
前段時(shí)間接到這樣一個(gè)需求,需要封裝一個(gè)組件實(shí)現(xiàn)可編輯,這個(gè)到底有多通用呢,就是需要在普通的文字展示包括表格,列表等等,所以本文將給大家介紹如何基于react封裝一個(gè)通用可編輯組件,需要的朋友可以參考下
2024-02-02
react配置webpack-bundle-analyzer項(xiàng)目優(yōu)化踩坑記錄
這篇文章主要介紹了react配置webpack-bundle-analyzer項(xiàng)目優(yōu)化踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
react路由v6版本NavLink的兩個(gè)小坑及解決
這篇文章主要介紹了react路由v6版本NavLink的兩個(gè)小坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10