在进行模糊查询时,经常会遇到输入框中的值改变但是没点搜索按钮的情况,这时再点击下一页或者其他东西的时候是不能带着输入框的值进行查询的。这就需要我们在点击搜索按钮的时候,储存此时输入框中的值,并且将搜索状态改成已搜索。如果输入框中的值改变了,将搜索状态改成未搜索。这样我们在点击下一页或者其他操作时先判断是什么搜索状态,如果是已搜索,就用搜索框中的值进行请求;如果是未搜索,按上一次输入框的值也就是储存的输入框的值进行请求。

搜索关键词高亮显示:比如搜索是按name进行模糊查询。遍历返回的数组,将每一个name中包含的搜索条件利用replace()进行替换,将搜索条件和改变颜色后的搜索条件进行替换。将替换好的name重新赋给数组中的name。此时,数组中的每一个name都已经被替换。显示时利用dangerouslySetInnerHTML,将name显示。
替换代码:
user[i].name=user[i].name.replace(this.state.searchValue,`<span
style="color:#FA541C">${this.state.searchValue}</span>`)
显示代码:
<div dangerouslySetInnerHTML={{ __html: item.name }}>

Last modification:July 27th, 2021 at 08:11 pm
如果觉得我的文章对你有用,请随意赞赏