300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > input输入框实时搜索匹配

input输入框实时搜索匹配

时间:2020-05-24 21:57:34

相关推荐

input输入框实时搜索匹配

实时搜索功能

最终效果如下:当是英文输入或数字时,每次输入都会触发,但当是中文输入法时,只有在选中文字后才会触发,类似百度搜索

(以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特殊样式包裹的内容即可

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。