js 实时监听搜索内容，即搜即查。

冰河非非 · 发表于 2022-12-13 23:05:17

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table tr th,table tr td{
padding: 10px;
}
table{
margin-bottom: 20px;
}
</style>
</head>
<body>
<input type="text" name="" id="input" value="" placeholder="请输入查询关键字" />
<input type="button" name="" id="search" value="搜索" />
<ul id="list">
<li>哈哈哈</li>
<li>啦啦啦</li>
<li>六六六</li>
<li>biubiu</li>
<li>噗噗噗</li>
</ul>
</body>
</html>
　　
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
// 实时监听搜索内容
var text = "";
setInterval(function(){
text = $('#input').val();//获取文本框输入
if($.trim(text) != ""){
$("#list li").hide().filter(":contains('"+text+"')").show();
}else{
$('#list tr').show();//当删除文本框的内容时，又重新显示表格所有内容
}
},100);
//通过点击按钮开始筛选
$(function() {
$('#search').click(function() {
var text = $('#input').val(); //获取文本框输入
if($.trim(text) != "") {
$("#table tr:not('#theader')").hide().filter(":contains('" + text + "')").show();
}
})
});
</script>
</body>
</html>

复制代码

冰河非非 · 发表于 2022-12-14 16:15:51

<html>
<head>
<title>实时查询</title>
<style>
label:before
{
content:"*";
color:red;
font-size:120%;
vertical-align:middle;
}
</style>
</head>
<meta charset = "utf-8" >
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<body>
<label for="searchCityName">查询</label>
<input id="searchCityName" style="width: 20%;" type="text" placeholder="中文 / 拼音首字母" />
<ul>
<li pinyin="bj" cityname="北京"><a href="">北京 </a></li>
<li pinyin="dl" cityname="大连"><a href="">大连 </a></li>
<li pinyin="sh" cityname="上海"><a href="">上海 </a></li>
<li pinyin="jn" cityname="济南"><a href="">济南 </a></li>
<li pinyin="gz" cityname="广州"><a href="">广州 </a></li>
<li pinyin="jh" cityname="金华"><a href="">金华 </a></li>
<li pinyin="wh" cityname="武汉"><a href="">武汉 </a></li>
<li pinyin="nj" cityname="南京"><a href="">南京 </a></li>
<li pinyin="sz" cityname="深圳"><a href="">深圳 </a></li>
<li pinyin="tj" cityname="天津"><a href="">天津 </a></li>
<li pinyin="cd" cityname="成都"><a href="">成都 </a></li>
<li pinyin="ly" cityname="临沂"><a href="">临沂 </a></li>
<li pinyin="cc" cityname="长春"><a href="">长春 </a></li>
<li pinyin="hz" cityname="杭州"><a href="">杭州 </a></li>
<li pinyin="nb" cityname="宁波"><a href="">宁波 </a></li>
<li pinyin="qd" cityname="青岛"><a href="">青岛 </a></li>
<li pinyin="sy" cityname="沈阳"><a href="">沈阳 </a></li>
</ul>
<script>
function searchCity() {
var searchCityName = $("#searchCityName").val();
if (searchCityName == "") {
$("ul li").show();
} else {
$("ul li").each(
function() {
var pinyin = $(this).attr("pinyin");
var cityName = $(this).attr("cityName");
if (pinyin.indexOf(searchCityName) != -1 || cityName.indexOf(searchCityName) != -1) {
$(this).show();
} else {
$(this).hide();
}
});
}
}
$('#searchCityName').bind('input propertychange', function() {
searchCity();
});
</script>
</body>
</html>

复制代码

再来一段。

官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)

天天ASP家园网友互动群

[文章教程] js 实时监听搜索内容，即搜即查。

在线客服

官方Q群 天天ASP家园网友互动群 群1: 697497501(新手学习互助群) 群2: 47598123(进阶应用群)

天天ASP家园网友互动群

[文章教程] js 实时监听搜索内容，即搜即查。

在线客服

官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)