您的位置：首页 > Web前端 > JQuery

input 点击放大镜背景搜索、jQuery实现简单前端搜索功能

2018-02-06 17:24 1376 查看

转自：http://blog.csdn.net/doguanghan/article/details/69628017?utm_source=itdadao&utm_medium=referral

<!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>js</title>

<style>

.search{width: 90%;height: 80px;margin: auto;margin: 0 5%;margin-top: 20px;}

.search_1{width: 100%;margin: 0 auto;height: 30px;border: 1px solid #e4dfdf;border-radius: 11px;}
.search_btn{width: 10%;height: 30px; background: url(images/search_03.png) left no-repeat;background-size:25px;background-position-x:10px;display: inline-block;border: none;float: left;outline: none;}

.search_input{width: 80%;border: none;outline: none;height: 30px;font-size: 14px;color:#999999;display: inline-block;float: left;padding-left: 5px;}

</style>

</head>

<script type="text/javascript">

</script>

<body>

<div class="search">
<div class="search_1"><input type="submit" value="" class="search_btn"/><input class="search_input" type="text" placeholder="请输入" onfocus="if (placeholder =='请输入'){placeholder =''}" onblur="if (placeholder ==''){placeholder='请输入}"/></div>
</div>

</body>
</html>

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><div
id="contents_1"><span>2015-7-8</span><a href="">这里是文章的标题1</a></div></li>

  <li><div
id="contents_1"><span>2015-7-8</span><a href="">这里是文章的标题2</a></div></li>

  <li><div
id="contents_1"><span>2015-7-8</span><a href="">这里是文章的标题3</a></div></li>

      </ul>

    </div>

</body>

</html>

jQuery代码：

[html] view
plain copy

<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('#contents_1:contains('+ searchText +')').parent();
//contents_1 这里可以换为你想要搜索那部分包含在li标签里的内容如：a、span 都可以但是不能为li 此例子为搜索li里面的所有内容
并且以li排好版的形式展示出来

          //将内容清空

          $("#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>

通过关键字检索列表中的元素，并将其添加到ul中。

其中$(':contains(text)')获取包含指定字符的元素，该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航