前言

任务需求

实现类似网易云这样的搜索联想

一、大体流程

拿到用户拿到的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 如何实现动态搜索(联想搜索)相关推荐

Ajax实现搜索联想自动补全
什么是搜索联想?自动补全? .百度是一个很典型的代表.在百度的搜索框中输入相关信息的时候,会有搜索联想以及自动补全. .搜索联想和自动补全:实际上是为了方便用户的使用.让用户的体验更好. .搜索联想: ...
Linux动态库(.so)搜索路径
众所周知,Linux动态库的默认搜索路径是/lib和/usr/lib.动态库被创建后,一般都复制到这两个目录中.当程序执行时需要某动态库,并且该动态库还未加载到内存中,则系统会自动到这两个默认搜索路 ...
android mysql 搜索功能_android利用数据库实现搜索联想功能
[实例简介] android利用数据库实现搜索联想功能.主要实现的效果是和google百度搜索一样,实现联想功能. [实例截图] [核心代码] 4e431bd8-d287-4028-8476-7510 ...
php 实现联想式搜索,PHP实现搜索联想功能（基于字典树算法）
搜索联想功能是各大搜索引擎具备的基础功能,如下图所示,这个功能简化了用户的输入行为,并且能够给用户推荐热门的搜索词,下面我们来讲一下如何用php实现搜索联想的功能. 实现原理搜索联想功能拆解一下由两 ...
javascript搜索框联想搜索_js实现输入框联想搜索
//模糊查询 functionSearchLike(jsons) {//var timerSerch = null; $(document).on('keyup', '[name=' + jsons. ...
linux定位so快捷方式_Linux动态库(.so)搜索路径 | 学步园
众所周知,Linux动态库的默认搜索路径是/lib和/usr/lib.动态库被创建后,一般都复制到这两个目录中.当程序执行时需要某动态库, 并且该动态库还未加载到内存中,则系统会自动到这两个默认搜索 ...
Vue移动端项目——搜索联想建议功能的实现（结合watch属性和使用lodash防抖节流）
搜索联想建议 1. 基本思路: 当搜索框输入内容的时候,请求加载联想建议的数据将请求得到的结果绑定到模板中 2. 基本功能一.将父组件中搜索框输入的内容传给联想建议子组件二.在子组件中监视搜索框 ...
php 实现联想式搜索,php实现联想搜索，你会吗？_后端开发
for和foreach哪个效率更高?为什么?_后端开发 1.作为一名phper,for和foreach循环遍历几乎每天都在使用,那么这两种遍历方式哪一种效率更高呢?2.效率高的原因是什么呢?3.原理分 ...
iOS——UISearchController（地图联想搜索Demo）
简介 UISearchController是iOS 8 之后推出的一个新的控件, 用于创建搜索条, 及管理搜索事件, 使用这个, 我们可以很容易的创建属于自己的搜索框.搜索框在app开发中是非常常见的 ...

React 如何实现动态搜索(联想搜索)

React 如何实现动态搜索高亮

前言

一、大体流程

二、使用步骤

1.封装用于样式变化的函数

2.使用函数

总结

React 如何实现动态搜索(联想搜索)相关推荐

最新文章

热门文章