jQuery实现搜索功能
HTML部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web搜索</title>
</head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="select.js"></script>
<body>
<div class="content-right">
<input type="text" autofocus="autofocus" class="text1"><input type="submit" value="搜索">
<h3 class="lishi">搜索过的内容</h3>
<h3>原数据</h3>
<ul id="rawdata">
<li><span>2018-03-08</span><a href="">Test1</a></li>
<li><span>2018-03-08</span><a href="">Test2</a></li>
<li><span>2018-03-09</span><a href="">Test3</a></li>
<li><span>2018-03-09</span><a href="">Test4</a></li>
<li><span>2018-03-10</span><a href="">Test5</a></li>
<li><span>2018-03-10</span><a href="">Test6</a></li>
<li><span>2018-03-11</span><a href="">Test6</a></li>
<li><span>2018-03-11</span><a href="">Test6</a></li>
<li><span>2018-03-11</span><a href="">Test7</a></li>
<li><span>2018-03-11</span><a href="">Test7</a></li>
</ul>
<h3>搜索到的数据</h3>
<ul id="searchdata">
</ul>
</div>
</body>
</html>
select.js
/*搜索内容*/
$(function(){
$("input[type=submit]").click(function () {
//获取输入的搜索内容
var searchText = $(this).prev().val();
//用于存储匹配出的li
var $searchLi = "";
if (searchText != "") {
//获取所有匹配的li
$searchLi = $("#rawdata").find('li:contains('+ searchText +')');
//将获取的元素追加到列表中
$("#searchdata").html($searchLi.clone());
}
//判断搜索内容是否有效,若无效,输出not find
if ($searchLi.length <= 0) {
$("#searchdata").html('暂无该数据!')
}
})
/*按下Enter键会执行搜索*/
$("input").keydown(function (e) {
//.which属性判断按下的是哪个键,回车键的键位序号为13
if (e.which == 13) {
//触发搜索按钮的点击事件
$('input[type=submit]').trigger("click");
/*搜索历史*/
$('.lishi').after("<span> "+$('.text1').val()+"</span>");
}
});
})