react+antd select下拉框?qū)崿F(xiàn)模糊搜索匹配的示例代碼
我們?cè)陂_(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)出現(xiàn)下拉框數(shù)據(jù)很多得情況，這個(gè)時(shí)候客戶一個(gè)個(gè)得找就很浪費(fèi)時(shí)間，那該怎么辦呢？
我們可以實(shí)現(xiàn)一邊輸入一遍模糊匹配。
實(shí)現(xiàn)后的效果是
具體代碼實(shí)現(xiàn)請(qǐng)看下面：
我們可以在Select.Option 里面返回我們想要搜索得字段，然后通過(guò)filterOption這個(gè)屬性去獲取和操作。
到此這篇關(guān)于react+antd select下拉框?qū)崿F(xiàn)模糊搜索匹配的示例代碼的文章就介紹到這了,更多相關(guān)react antd select模糊搜索內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在?React?Native?中給第三方庫(kù)打補(bǔ)丁的過(guò)程解析
這篇文章主要介紹了在?React?Native?中給第三方庫(kù)打補(bǔ)丁的過(guò)程解析,有時(shí)使用了某個(gè)React Native 第三方庫(kù)，可是它有些問(wèn)題，我們不得不修改它的源碼，本文介紹如何修改源碼又不會(huì)意外丟失修改結(jié)果的方法，需要的朋友可以參考下2022-08-08
npx create-react-app xxx創(chuàng)建項(xiàng)目報(bào)錯(cuò)的解決辦法
這篇文章主要介紹了npx create-react-app xxx創(chuàng)建項(xiàng)目報(bào)錯(cuò)的解決辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
引入代碼檢查工具stylelint實(shí)戰(zhàn)問(wèn)題經(jīng)驗(yàn)總結(jié)分享
eslint的配置引入比較簡(jiǎn)單，網(wǎng)上有比較多的教程，而stylelint的教程大多語(yǔ)焉不詳。在這里，我會(huì)介紹一下我在引入stylelint所遇到的坑，以及解決方法2021-11-11
React 和 MobX 是一對(duì)強(qiáng)力組合，React 通過(guò)提供機(jī)制把應(yīng)用狀態(tài)轉(zhuǎn)換為可渲染組件樹并對(duì)其進(jìn)行渲染，而MobX提供機(jī)制來(lái)存儲(chǔ)和更新應(yīng)用狀態(tài)供 React 使用，這篇文章主要介紹了React+Mobx基本使用、模塊化,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了react+ant.d添加全局loading方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
react中如何使用定義數(shù)據(jù)并監(jiān)聽(tīng)其值
這篇文章主要介紹了react中如何使用定義數(shù)據(jù)并監(jiān)聽(tīng)其值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
詳解react-navigation6.x路由庫(kù)的基本使用
最近兩個(gè)項(xiàng)目都用到了React Navigation，所以就研究一下如何使用，本文主要介紹了react-navigation6.x路由庫(kù)的基本使用，感興趣的可以了解一下2021-11-11
React 起源于 Facebook 的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來(lái)架設(shè) Instagram 的網(wǎng)站.這篇文章主要介紹了ReactJs快速入門教程(精華版)的相關(guān)資料,需要的朋友可以參考下2016-11-11
完美解決react-codemirror2?編輯器需點(diǎn)擊一下或者延時(shí)才顯示數(shù)據(jù)的問(wèn)題
這篇文章主要介紹了react-codemirror2編輯器需點(diǎn)擊一下或者延時(shí)才顯示數(shù)據(jù)的問(wèn)題,解決方法也很簡(jiǎn)單，需要手動(dòng)引入自動(dòng)刷新的插件，配置一下參數(shù)就可以了，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-08-08
React+TS+IntersectionObserver實(shí)現(xiàn)視頻懶加載和自動(dòng)播放功能
通過(guò)本文的介紹，我們學(xué)習(xí)了如何使用 React + TypeScript 和 IntersectionObserver API 來(lái)實(shí)現(xiàn)一個(gè)視頻播放控制組件，該組件具有懶加載功能，只有在用戶滾動(dòng)頁(yè)面且視頻進(jìn)入視口時(shí)才開(kāi)始下載視頻資源,需要的朋友可以參考下2023-04-04