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

最新推荐文章于 2022-08-16 18:35:20 发布

原创最新推荐文章于 2022-08-16 18:35:20 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jq模糊搜索 #js模糊搜索 #contains选择器 #关键词高亮

JQuery 专栏收录该内容

10 篇文章

订阅专栏

博客主要包含HTML代码和JS代码，涉及到jq模糊搜索、js模糊搜索，运用contains选择器实现模糊搜索功能，还能对关键词进行高亮显示，属于前端开发相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

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

<div 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>'));
        })
    }
});