一、效果图
搜索结果匹配关键字高亮.gif
二、代码实现
<input ref="searchInput" v-model="inputVal" type="text" placeholder="搜索目的地" />
第一种写法：搜索不区分大小写,使用slice()切分字符串推荐使用:
<a class="text">
<span>{{item.name.slice(0,item.name.toLowerCase().indexOf(inputVal.toLowerCase()))}}</span><span
style="color:#2A70FE">{{item.name.slice(item.name.toLowerCase().indexOf(inputVal.toLowerCase()),item.name.toLowerCase().indexOf(inputVal.toLowerCase())+inputVal.length)}}</span><span>{{item.name.substr(item.name.toLowerCase().indexOf(inputVal.toLowerCase())+inputVal.length)}}</span>
</a>
第二种写法：搜索不区分大小，使用substr()切分字符串不推荐使用（因为ECMAscript没有对substr方法进行标准化）:
<a class="text">
<span>{{item.name.substr(0,item.name.toLowerCase().indexOf(inputVal.toLowerCase()))}}</span><span
style="color:#2A70FE">{{item.name.substr(item.name.toLowerCase().indexOf(inputVal.toLowerCase()),inputVal.length)}}</span><span>{{item.name.substr(item.name.toLowerCase().indexOf(inputVal.toLowerCase())+inputVal.length)}}</span>
</a>
第三种写法：搜索区分大小写的写法最好把substr再优化为slice切分:
<input ref="searchInput" v-model="inputVal" type="text" placeholder="搜索目的地" />
<a class="text">
<span>{{item.name.substr(0,item.name.indexOf(inputVal))}}</span><span style="color:#2A70FE">{{inputVal}}</span><span>{{item.name.substr(item.name.indexOf(inputVal)+inputVal.length)}}</span>
</a>
三、相关知识：
1、indexOf兼容，可以用以下代码兼容，也可以使用polyfill
let Util = {};
/**
* 判断浏览器是否支持indexOf ，indexOf 为ecmaScript5新方法 IE8以下（包括IE8， IE8只支持部分ecma5）不支持
*/
Util.support_indexOf = function () {
if (!Array.prototype.indexOf) {
// 新增indexOf方法
Array.prototype.indexOf = function (item) {
let result = -1;
let a_item = null;
if (this.length == 0) {
return result;
}
for (var i = 0, len = this.length; i < len; i++) {
a_item = this[i];
if (a_item === item) {
result = i;
break;
}
}
return result;
}
}
}
Util.support_indexOf();
2、slice() 方法
定义和用法
slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
语法
stringObject.slice(start,end)
返回值
一个新的字符串。包括字符串 stringObject 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。
3、 substr() 方法不推荐使用
定义和用法
substr()方法可在字符串中抽取从 start 下标开始的指定数目的字符。
语法
stringObject.substr(start,length)
注：ECMAscript 没有对该方法进行标准化，因此反对使用它。
