实时搜索功能
最终效果如下:当是英文输入或数字时,每次输入都会触发,但当是中文输入法时,只有在选中文字后才会触发,类似百度搜索
(以react为例)
<inputvalue={searchValue}onCompositionStart={this.onCompositionStart}onCompositionEnd={this.onCompositionEnd}onChange={this.handleInput}/>
需要配合input的以上几个触发函数。
我们希望仅在value值发生变化时,才会触发实时搜索调取后端接口,而在中文输入下,未选词时的按键也会触发onChange事件。
通过一个变量来控制这时候需不需要触发,
onCompositionStart:中文输入开始
onCompositionEnd:中文输入结束
handleInput = (e) => {let searchValue = e.target.value;this.setState({searchValue },() => {if(searchValue === ''){// 输入为空时this.setState({firmsList:[]})}clearTimeout(this.timer);this.timer = setTimeout(async () => {// 中文输入结束并且输入不为空if(this.state.ifConfirm && this.state.searchValue){// 这时候是实际输入框中内容变化时,可以调取后端接口 返回搜索结果let res = await fetch/Axios ('关键字');this.setState({firmsList:res.list})}})})}
[注:需要加一个定时器在异步操作中去做关键字匹配功能,保证在判断是否中文输入已经结束后执行后续操作]
列表选中关键字标红
标红其实就是一个简单的内容替换,首先要保证标签可以识别html,在react中可以通过一个属性dangerouslySetInnerHTML中的__html值来定义。
<p dangerouslySetInnerHTML={{__html: hightlightText(item.k,item.h[0].v)}}></p>
//高亮替换函数 originalText-未标红前的内容,searchText-关键词
const hightlightText = (originalText, searchText) => {let regExp = new RegExp(searchText,'g');let newRes = originalText.replace(regExp,`<span style={{color:#FF534A}}>${searchText}</span>`);// console.log(newRes);return newRes;}
把选中关键字替换成一个span特殊样式包裹的内容即可