您的位置:首页 > Web前端 > JQuery

JQuery实现搜索关键词变红,包含关键词的div显示,无div的隐藏

2016-12-30 09:30 603 查看
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();
}

});
})
<div class="keysearch">
<span>搜索城市:</span><input id="keywords" type="text" placeholder="请输入城市名称筛选" />
<div id="rootpane">
<div class="qa_head">
<a> <strong> 8:00起售车站</strong> 北京西、南京、南京南、同江。</a>
</div>
<div class="qa_head ">
<a> <strong> 8:30 起售车站</strong>白城、成都东、东莞、东莞东、惠州、济宁、南充、宁波、日照、山海关、汕头、松原、乌兰浩特、乌鲁木齐南、南充北、乌鲁木齐。</a>
</div></div>
因发布在编辑器里面,所以代码有嵌套

附上实际演示地址http://www.green12306.com/informRead.htm?method=detail&checks=679
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: