JQuery實現搜索關鍵詞變紅,包含關鍵詞的div顯示,無div的隱藏

var arr2 = "";
var arr1 = "";
var x = "";
$(function() {
    $("#keywords").bind("input propertychange",
    function() {
        arr2 = $(this).val();
        $("font").each(function() {
            var xx = $(this).html();
            $(this).replaceWith(xx);
        }) if (/^[\u4e00-\u9fa5]+$/i.test(arr2)) {
            var reg = "/" + arr2 + "/g";
            x = document.getElementsByClassName("qa_head");
            for (var i = 0; i < x.length; i++) {
                arr1 = "<font class='fontRed'>" + arr2 + "</font>";
                x[i].innerHTML = x[i].innerHTML.replace(eval(reg), arr1);
            }
            $("#rootpane .qa_head").hide();
            $("#rootpane a:contains(" + arr2 + ")").parent().show();
        } else {
            $("#rootpane .qa_head").show();
        }

    });
})
<html>
 <head></head>
 <body>
  <p class="keysearch"> 
   <span>搜索城市:</span>
   <input id="keywords" type="text" placeholder="請輸入城市名稱篩選" /> 
   <p id="rootpane"> 
    <p class="qa_head"> 
     <a> <strong> 8:00起售車站</strong> 北京西、南京、南京南、同江。</a> 
    </p> 
    <p class="qa_head "> 
     <a> <strong> 8:30 起售車站</strong>白城、成都東、東莞、東莞東、惠州、濟寧、南充、寧波、日照、山海關、汕頭、松原、烏蘭浩特、烏魯木齊南、南充北、烏魯木齊。</a> 
    </p>
   </p>
  </p>
 </body>
</html>

發佈留言