1. 程式人生 > >js搜尋 高亮匹配關鍵字,即時展示相關資料

js搜尋 高亮匹配關鍵字,即時展示相關資料

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; }