React 如何实现动态搜索(联想搜索)
生活随笔
收集整理的這篇文章主要介紹了
React 如何实现动态搜索(联想搜索)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
React 如何實現動態搜索高亮
- 前言
- 一、大體流程
- 二、使用步驟
- 1.封裝用于樣式變化的函數
- 2.使用函數
- 總結
前言
任務需求
實現類似網易云這樣的搜索聯想
一、大體流程
拿到用戶拿到的Input中的value數據,發送請求獲取后端響應回來的數據并展示,
唯一的技術難點就是,如何讓用戶輸入的數據與后端返回的數據,呈現高亮顯示
二、使用步驟
1.封裝用于樣式變化的函數
代碼如下):
/* 樣式格式化校驗 */ /* @content 初始文字@keyword 高亮文字@color 需要轉化的顏色 */ export const handleHighlightedWords = (content, keyWord, color) => {//1.判斷文本中是否包含,因為indexOf對大小寫敏感所以都轉化成大寫const index = content.toLocaleUpperCase().indexOf(keyWord.toLocaleUpperCase());//2.定義正則 全局匹配不區分大小寫const Rex = new RegExp(keyWord, "gi");//3.判斷并處理if (index !== -1) {return content.replace(Rex, (text) => {return `<font style="color:${color}">${text}</font>`;});} else {return content;} };說明:
indexOf 對大小寫敏感所以我統一轉換成大寫再搜索
因為replace只能替換出現的第一個字符,且還區分大小寫所以,需要對replace
用正則進行增強
正則一般人不常用的話上手比較懵,其實也就是幾個字符
我這里表達的是匹配用戶輸入的值,并且開啟全局匹配,且不區分大小寫
最后增強replace ,又發現如果直接替換,無論大寫小寫都會替換成用戶輸入的值了,有又通過回調方法拿到匹配上的數據做增強
2.使用函數
代碼如下):
<NavLinkkey={item.id}to={"/"}dangerouslySetInnerHTML={{__html: handleHighlightedWords(item.name,inputSearch,"#c20c0c"),}}>說明:
dangerouslySetInnerHTML使用這種方式往NavLink中插入數據
類似于原生的innerHTML
總結
總的來說就是,拿到輸入的數據,先都轉換成大寫或小寫進行比較,如果有,使用正則去匹配字符串中的數據,再對匹配上的內容進行樣式增強。
總結
以上是生活随笔為你收集整理的React 如何实现动态搜索(联想搜索)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 优质的免费HTML编辑器推荐
- 下一篇: 中软国际第十天