Rumah > hujung hadapan web > tutorial js > jQuery简单前端搜索功能实现方法

jQuery简单前端搜索功能实现方法

小云云
Lepaskan: 2018-05-16 10:48:14
asal
2660 orang telah melayarinya

本文主要介绍了jQuery实现的简单前端搜索功能,涉及jQuery事件响应与页面元素遍历、匹配、动态设置等相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。

html代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>工程轻量化与可靠性技术实验室</title>

</head>

<body>

<p 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>

  </p>

</body>

Salin selepas log masuk

jQuery代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<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(&#39;a:contains(&#39;+ searchText +&#39;)&#39;).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>

Salin selepas log masuk

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

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

此方法中就是通过判断所获取的元素知否包含所搜索的字符,来实现简单的检索功能。

但是却存在兼容问题,无法兼容IE,在获取元素parent()时无法将内容写入列表中。

相关推荐:

html中jQuery实现对文本的搜索功能

JS带导航城市列表以及输入搜索功能的实现

jQuery实现搜索功能并显示搜索相关内容


Atas ialah kandungan terperinci jQuery简单前端搜索功能实现方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan