关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

jQuery :contains选择器实现模糊搜索查询并且搜索关键词高亮-马冬明

发布时间:2019-10-17 11:47:39

html代码:

<input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索关键词" />

<dvi class="weui-cells weui-cells_radio" id="fenxiang-list">
	<label class="weui-cell weui-check__label close-popup" for="x12">
		<div class="weui-cell__bd">
			<p>安全防护栏 - 安全防护栏搭设</p>
			<p class="jobcontent">竖杆焊接安装(包括植筋),水平杆搭设,安装安全网,踢脚板安装,钢管清理,安全防护踢脚板收集、整理,踢脚板刷油漆</p>		
		</div>
		<div class="weui-cell__ft">
			<input type="radio" class="weui-check" name="radio" id="x12"><span class="weui-icon-checked"></span>
		</div>
	</label>
	<label class="weui-cell weui-check__label close-popup" for="x2">
		<div class="weui-cell__bd">
			<p>钢筋混凝土工程 - 模板</p>
			<p class="jobcontent">直面冠梁,斜面冠梁,内支撑腰梁,锚索腰梁,主撑梁,圆环撑,连系梁,栈桥梁、板,试验锚墩,格构梁,其他零星构件</p>
		</div>
		<div class="weui-cell__ft">
			<input type="radio" class="weui-check" name="radio" id="x2"><span class="weui-icon-checked"></span>
		</div>
	</label>
	<label class="weui-cell weui-check__label close-popup" for="x9">
		<div class="weui-cell__bd">
			<p>降排水系统 - 基坑底排水沟</p>
			<p class="jobcontent">沟槽开挖,回填,砌砖,抹面,回填公分石</p>
		</div>
		<div class="weui-cell__ft">
			<input type="radio" class="weui-check" name="radio" id="x9"><span class="weui-icon-checked"></span>
		</div>
	</label>
	<label class="weui-cell weui-check__label close-popup" for="x22">
		<div class="weui-cell__bd">
			<p>锚杆(索) - 钢管竖向锚杆</p>
			<p class="jobcontent">钢管制作,锚杆施工,钢管安放、洗管,注浆</p>
		</div>
		<div class="weui-cell__ft">
			<input type="radio" class="weui-check" name="radio" id="x22"><span class="weui-icon-checked"></span>
		</div>
	</label>
</div>


js代码:

$('#searchInput').bind('input propertychange', function () {
    var _val = this.value;
    if (_val == '') {
        $('#fenxiang-list label').show();
        $('#fenxiang-list p').each(function () {
            $(this).html($(this).html().replace('<span style="color:red;">', ''));
            $(this).html($(this).html().replace('</span>', ''));
        })
    } else {
        $("#fenxiang-list label").hide().filter(":contains('" + _val + "')").show();
        $('#fenxiang-list p').each(function () {
            $(this).html($(this).html().replace('<span style="color:red;">', ''));
            $(this).html($(this).html().replace('</span>', ''));
            $(this).html($(this).html().replace(_val, '<span style="color:red;">' + _val + '</span>'));
        })
    }
});

/template/Home/Zkeys/PC/Static