js搜尋 高亮匹配關鍵字,即時展示相關資料
阿新 • • 發佈:2019-01-07
searchCont:function(el,flag){
var _this = this;
//空格替換
el.value = el.value.replace(' ','');
//關鍵字
var searchVal = $(el).val();
//目前只匹配電話高亮
if(flag){
var reText = _this.searchHighlight(_this.ulText,searchVal);
$('.j_chooseList' ).html(reText);
}
//高亮匹配後需要重新獲取dom
var list = $(el).parent().next().find('li');
//遍歷列表,匹配檢索關鍵詞
$.each(list, function(index, item){
var $item = $(item);
var eleText = $item.attr('name')+$item.find('.rightIco').attr('phone');
if (eleText.indexOf(searchVal) != -1) {
item.style.display = "block";
}else {
item.style.display = 'none';
}
});
},
searchHighlight:function(content,keyWord){
//搜尋高亮匹配
var keyWordArr = keyWord.replace(/[\s]+/g, ' ').split(' ' );
var re;
for(var n = 0; n < keyWordArr.length; n++) {
re = new RegExp("(" + keyWordArr[n] + ")", "gmi");
//匹配電話
var regd = /<b class="left">(.*?)<\/b>/gmi;
var outCome_exec = content.match(regd);
var needArr = [];
//得要擷取後的號碼陣列
for(var i = 0;i<outCome_exec.length;i++){
var nodom = outCome_exec[i].replace(regd,'$1');
nodoms = nodom.replace(re, '<span style="color:#32b144;">$1</span>');
content = content.replace(nodom, nodoms);
}
}
return content;
}