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

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

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

正文

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

特點

輕量級的React搜索框組件
用可定制的標題將來自多個API或其他數(shù)據(jù)源的搜索結果分組
指定列表框選項的最大數(shù)量，以及每組的加權顯示比例
用你自己的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)容，更多關于React自動搜索組件Turnstone的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

react開發(fā)教程之React 組件之間的通信方式
本篇文章主要介紹了react開發(fā)教程之React組件通信詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
React?中的重新渲染類組件及函數(shù)組件
這篇文章主要為大家介紹了React?中的重新渲染類組件及函數(shù)組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
深入淺析React中diff算法
React 最為核心的就是 Virtual DOM 和 Diff 算法，diff算法的基礎是Virtual DOM，接下來通過本文給大家介紹React中diff算法的相關知識，對React中diff算法感興趣的朋友跟隨小編一起學習下吧
2021-05-05
React Fiber源碼深入分析
Fiber 可以理解為一個執(zhí)行單元，每次執(zhí)行完一個執(zhí)行單元，React Fiber就會檢查還剩多少時間，如果沒有時間則將控制權讓出去，然后由瀏覽器執(zhí)行渲染操作，這篇文章主要介紹了React Fiber架構原理剖析,需要的朋友可以參考下
2022-11-11
react組件多次渲染問題的解決
本文主要介紹了react組件多次渲染問題的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-07-07
React純前端模擬實現(xiàn)登錄鑒權
這篇文章主要為大家詳細介紹了React純前端模擬實現(xiàn)登錄鑒權的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2024-04-04
React?數(shù)據(jù)共享useContext的實現(xiàn)
本文主要介紹了React?數(shù)據(jù)共享useContext的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-04-04
基于react封裝一個通用可編輯組件
前段時間接到這樣一個需求,需要封裝一個組件實現(xiàn)可編輯,這個到底有多通用呢,就是需要在普通的文字展示包括表格,列表等等,所以本文將給大家介紹如何基于react封裝一個通用可編輯組件,需要的朋友可以參考下
2024-02-02
react配置webpack-bundle-analyzer項目優(yōu)化踩坑記錄
這篇文章主要介紹了react配置webpack-bundle-analyzer項目優(yōu)化踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
react路由v6版本NavLink的兩個小坑及解決
這篇文章主要介紹了react路由v6版本NavLink的兩個小坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10