前端jQuery搜索

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>&emsp;"+$('.text1').val()+"</span>");
        }  
    }); 
})

猜你喜欢