实时搜索功能
最终效果如下：当是英文输入或数字时，每次输入都会触发，但当是中文输入法时，只有在选中文字后才会触发。
（以react为例）
<input value={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特殊样式包裹的内容即可
