jQuery實現簡單前端搜索功能


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>工程輕量化與可靠性技術實驗室</title>
</head>
<body>
<div class="content-right">
      <input type="text"><input type="submit" value="搜索">
      <h3>應用流體學</h3>
      <ul id="content_news_list">
        <li><span>2015-7-8</span><a href="">這里是文章的標題1</a></li>
        <li><span>2015-7-8</span><a href="">這里是文章的標題2</a></li>
        <li><span>2015-7-8</span><a href="">這里是文章的標題3</a></li>
        <li><span>2015-7-8</span><a href="">這里是文章的標題4</a></li>
        <li><span>2015-7-8</span><a href="">這里是文章的標題5</a></li>
        <li><span>2015-7-8</span><a href="">這里是文章的標題6</a></li>
        <li><span>2015-7-8</span><a href="">這里是文章的標題6</a></li>
        <li><span>2015-7-8</span><a href="">這里是文章的標題6</a></li>
        <li><span>2015-7-8</span><a href="">這里是文章的標題6</a></li>
        <li><span>2015-7-8</span><a href="">這里是文章的標題4</a></li>
      </ul>
    </div>
</body>
<script type="text/javascript">
    $(function(){

      $("input[type=text]").change(function () {
        var searchText = $(this).val();//獲取輸入的搜索內容
        var $searchLi = "";//預備對象,用於存儲匹配出的li

        if (searchText != "") {

          //獲取所有匹配的li
          $searchLi = $("#content_news_list").find('a:contains('+ searchText +')').parent();
          //將內容清空
          $("#content_news_list").html("");
        }
        
        //將獲取的元素追加到列表中
        $("#content_news_list").html($searchLi).clone();

        //判斷搜索內容是否有效,若無效,輸出not find
        if ($searchLi.length <= 0) {
          $("#content_news_list").html("<li>not find</li>")
        }
      })

      $("input[type=submit]").click(function () {
        $("searchText").change();
      })
    })
</script>

jQuery實現簡單前端搜索功能


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM