jQuery实现简单前端搜索功能

最新推荐文章于 2019-10-18 10:57:12 发布

diaobang0776

最新推荐文章于 2019-10-18 10:57:12 发布

阅读量378

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/wordblog/p/8214168.html

版权

<!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实现简单前端搜索功能

转载于:https://www.cnblogs.com/wordblog/p/8214168.html

diaobang0776

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现简单前端搜索功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>工程轻量化与可靠性技术实验室</title></head><body><div class="content-rig...
复制链接

扫一扫