最终效果如下：当是英文输入或数字时，每次输入都会触发，但当是中文输入法时，只有在选中文字后才会触发。

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