如何进行一个模糊搜索或者关键字搜索

gzhuierya 2023-10-10 17:44:19

如何实现这样的搜索框
在文本框输入HP后，点击搜索后可以搜索到这两条信息，其它信息隐藏

<!DOCTYPE HTML>
<html>
<head>
</head>
<script src="JS/jquery-2.1.1.min.js"></script>
<script src="JS/搜索功能.js"></script>
<body>
		    <div class="middle">
		      <!--输入框和按钮-->
		        <div class="input">
		          <!--输入框--> <!--按钮-->
		          <input type="text" id="text" /><input type="button" value="搜索"/ id="btn" >
		        </div>
		      </div>
			  <div>
				  <table class="biaoge">
					  <thead>
						  <tr class="tr1">
						  	 <td class="td1">打印机型号</td>
						  	 <td class="td1">品牌</td>
						  	 <td class="td1">耗材型号</td>
						  	 <td class="td1">商城编码</td>
						  	 <td class="td1">链接</td>
						  </tr>
					  </thead>
					  <tbody>
					  <tr>
						  <td class="td12">HP LaserJet P1007/P1008/P1106/P1108/M1130/M1216nfh/M1213nf/M1136/M126a/M126nw/M128fp/M128fw/M226dw/226dn/M202n/M202dw</td>
						  <td class="td2">
							  <li class="li1">格之格</li>
							  <li class="li2">科思特</li>
							  <li class="li2">得力</li>
							</td>
						  <td class="td2">
							  <li class="li1">88A</li>
							  <li class="li2">388A</li>
							  <li class="li2">88</li>
							</td>
						  <td class="td3">
							  <li class="li3"><a href="www.baidu.com" target="_blank">广联 :</a></li>
							  <li class="li4">易联 :</li>
							  <li class="li4">即达 :</li>
							  <li class="li4">惠尔雅 :</li>
							  <li class="li4">正丰汇 :</li>
							  <li class="li4">汇百丰达 :</li>
							</td>
							<td class="td3">
								 <li class="li3">广联 :</li>
								 <li class="li4">易联 :</li>
								 <li class="li4">即达 :</li>
								 <li class="li4">惠尔雅 :</li>
								 <li class="li4">正丰汇 :</li>
								 <li class="li4">汇百丰达 :</li>
							</td>
					  </tr>
					  <tr>
						  <td class="td12">Lenovo LJ3303DN LJ3803DN</td>
						  <td class="td2">
							  <li class="li1">格之格</li>
							  <li class="li2">科思特</li>
							  <li class="li2">得力</li>
							</td>
						  <td class="td2">
							  <li class="li1">88A</li>
							  <li class="li2">LD333</li>
							  <li class="li2">K 411(粉筒)</li>
							</td>
						  <td class="td3">
							  <li class="li3">广联 :</li>
							  <li class="li4">易联 :</li>
							  <li class="li4">即达 :</li>
							  <li class="li4">惠尔雅 :</li>
							  <li class="li4">正丰汇 :</li>
							  <li class="li4">汇百丰达 :</li>
							</td>
							<td class="td3">
								 <li class="li3">广联 :</li>
								 <li class="li4">易联 :</li>
								 <li class="li4">即达 :</li>
								 <li class="li4">惠尔雅 :</li>
								 <li class="li4">正丰汇 :</li>
								 <li class="li4">汇百丰达 :</li>
							</td>
					  </tr>
					  <tr>
						  <td class="td12">HP LaserJet P1007/P10085</td>
						  <td class="td2">
							  <li class="li1">格之格</li>
							  <li class="li2">科思特</li>
							  <li class="li2">得力</li>
							</td>
						  <td class="td2">
							  <li class="li1">88A</li>
							  <li class="li2">K 411(粉筒)</li>
							  <li class="li2">88</li>
							</td>
						  <td class="td3">
							  <li class="li3">广联 :</li>
							  <li class="li4">易联 :</li>
							  <li class="li4">即达 :</li>
							  <li class="li4">惠尔雅 :</li>
							  <li class="li4">正丰汇 :</li>
							  <li class="li4">汇百丰达 :</li>
							</td>
							<td class="td3">
								 <li class="li3">广联 :</li>
								 <li class="li4">易联 :</li>
								 <li class="li4">即达 :</li>
								 <li class="li4">惠尔雅 :</li>
								 <li class="li4">正丰汇 :</li>
								 <li class="li4">汇百丰达 :</li>
							</td>
					  </tr>
</body>
<style>
	.middle{
	   /*上间距*/
	   margin-top: 138px;
	
	   /*内容居中*/
	   text-align: center;
	   
	}
	
	   .input{
	   
	  /*上间距*/
	   
	  margin-top: 25px;
	   
	}
	
	   /*输入框*/
	 #text{
	   width: 532px;
	   height: 34px;
	   border: 2px solid #3385ff;
	  /*去掉右边框 - 将右边框宽度设置为0*/
	  /*border-right-width: 0;*/
	  border-right: none;
	  /*左填充*/
	  padding-left: 7px;
	   border-top-left-radius: 5px;/*方框左上圆角*/
	   border-bottom-left-radius: 5px;
	 
	}
	
	   /*按钮*/
	
	 #btn{
	   width: 100px;
	   height: 40px;
	
	   background-color: #3385ff;
	
	   color: white;
	
	   border: 1px solid #3385ff;
	   /*垂直对齐方式*/
	
	   vertical-align: top;
	   border-top-right-radius: 5px;
	   border-bottom-right-radius: 5px;
	
	 }
	 #btn:hover {
	  cursor: pointer;/*鼠标移入变成手*/
	 }
	
	 .xinwen{
	   width: 644px;
	  
	 height: 250px;
	
	   background-color: brown;
	   
	margin: 0 auto;
	 
	}
	 a{
	   text-decoration: none;/*超链接下划线取消*/
	 }
	 a:link{
	   color: black;/*超链接文字颜色*/
	 }
	 .biaoge{
	   border: solid 2px;
	   width: 2000px;
	   height: 90%;
	   margin-top: 10px;
	   margin-left: 50px;
	 }
	 .tr1{
	   border: solid 2px red;
	   width: 100px;
	   height: 100px;
	 }
	 .td1{
	   border: solid 2px ;
	   width: 100px;
	   height: 5px;
	   text-align: center;
	 }
	 .td12{
	   border: solid 2px cornflowerblue;
	   text-align: center;
	   min-width: 40px;
	   white-space: nowrap;
	   text-overflow: ellipsis;
	   overflow: hidden;
	   max-width: 60px;
	 }
	 .li1{
	   list-style-type: none;
	   border: #3385ff 2px solid;
	   text-align: center;
	   height: 43px;
	   line-height: 40px;
	   font-size: 25px;
	 }
	 .li2{
	   list-style-type: none;
	   border: #3385ff 2px solid;
	   border-top: none;
	   text-align: center;
	   height: 43px;
	   line-height: 40px;
	   font-size: 25px;
	 }
	 .li3{
	   list-style-type: none;
	   border: #3385ff 2px solid;
	   padding-left: 20px;
	 }
	 .li4{
	   list-style-type: none;
	   border: #3385ff 2px solid;
	   border-top: none;
	   padding-left: 20px;
	 }
</style>
<script>
	jQuery.expr[':'].contains = function (a, i, m) {
	    return jQuery(a).text().toUpperCase()
	        .indexOf(m[3].toUpperCase()) >= 0;
	}//忽略大小写
	
	$(function(){
		$("#btn").click(function(){
			var $sea = $('#text').val();
			//先隐藏全部，再把符合筛选条件的值显示
			$('table tbody tr').hide().filter(':contains('+$sea+')').show();
		})
	})
</script>
</html>

 

...全文
391 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
gzhuierya 2023-10-11
  • 打赏
  • 举报
 回复

你好，我测试之后只能搜索P标签里面的数字，其它都不行

老牛毕设 2023-10-10
  • 打赏
  • 举报
 回复

要实现这样的搜索框，您可以使用JavaScript和CSS来处理用户输入和搜索结果展示。以下是一个基本的实现示例：

<!DOCTYPE html>
<html>
<head>
  <title>搜索示例</title>
  <style>
    .search-result {
      display: none;
    }
  </style>
</head>
<body>
  <input type="text" id="search-input" placeholder="搜索...">
  <button onclick="search()">搜索</button>
  <div class="search-result" id="result-1">
    <h3>HP LaserJet P1007/P1008/P1106/P1108/M1130/M1216nfh/M1213nf/M1136/M126a/M126nw/M128fp/M128fw/M226dw/226dn/M202n/M202dw</h3>
    <p>这里是相关信息1。</p>
  </div>
  <div class="search-result" id="result-2">
    <h3>Lenovo LJ3303DN LJ3803DN</h3>
    <p>这里是相关信息2。</p>
  </div>

  <script>
    function search() {
      var input = document.getElementById('search-input').value;
      var results = document.getElementsByClassName('search-result');
      for (var i = 0; i < results.length; i++) {
        var result = results[i];
        if (result.id.indexOf(input) !== -1) {
          result.style.display = 'block';
        } else {
          result.style.display = 'none';
        }
      }
    }
  </script>
</body>
</html>

在上面的示例中，我们创建了一个文本框和一个按钮，用于用户输入和搜索操作。同时，我们在

asp 多个关键字模糊查询
asp 多个关键字模糊查询，用空格区分.这是一个非常实用的程序。
模糊搜索：ff+关键字
模糊搜索：ff+关键字
易语言源码超级列表框表项关键字搜索.7z
易语言源码超级列表框表项关键字搜索.7z
关键字检索，比XP自带的好用多了。与大家分享
一款很好用关键字检索工具，绿色版的。比XP自带的好用多了，速度还快。
java实现根据关键字查找所在文件夹的文件
java实现根据关键字查找文件夹里面的包含关键字的文件
夏志121（个人社区）

32,287

社区成员

1,036

社区内容

发帖
与我相关
我的任务
社区描述
夏志121的个人社区，旨在为编程初学者和对编程感兴趣的学生提供一个互动、支持和学习的平台。欢迎加入
前端后端开发语言 个人社区 江西省·南昌市
社区管理员
  • 夏志121
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

夏志121的个人社区，旨在为编程初学者和对编程感兴趣的学生提供一个互动、支持和学习的平台。欢迎加入

试试用AI创作助手写篇文章吧

+ 用AI写文章