jQ实现关键字查询

最新推荐文章于 2023-09-29 08:46:20 发布

原创最新推荐文章于 2023-09-29 08:46:20 发布 · 3k 阅读

22 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html #css3 #jquery

前端jQuery 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何利用jQuery实现关键字查询的功能，通过示例代码展示了其实现过程，并给出了实际运行的效果展示。

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

</style>

<body>
    <h2>关键字</h2>
    <input type="text" class="text" placeholder="请输入关键字">
    <ul class="ts">



    </ul>

</body>
<script src="dist/jquery.js"></script>
<script>
    $(function () {
        var b = 0;
        $.expr[':'].contains = function (a,b, c) {//定义一个伪类选择器让jQuery的contains方法不区分大小写
            return $(a).text().toUpperCase().indexOf(c[3].toUpperCase()) >= 0;

        };
        var data = [
            'Head First HTML 与CSS', 'JavaScript高级程 序设计',
            'JavaScript DOM编程艺术', ' 高性能网站建设进阶指南',
            '高性能网站建设指南', ' Web前端黑客技术揭秘', ' JavaScript权威指南',
            '精通CSS', '编写可维护的JavaScript', "高性能JavaScript"
        ];
        $(data).each(function () {
            $(".ts").append("<li>" + data[b] + "<li/>")//把data里的数据逐个以<li>的形式遍历到ul里
            b++;
        });
        $(".text").change(function () {
            if ($(".text") == '') {
                $(li).show();
            }
            $("li:contains(" + $(".text").val().trim() + ")").show(); //选择所有包含 $(".text")的<li> trim() 去除字符串的头尾空格元素
            $("li:not(:contains(" + $(".text").val().trim() + "))").hide(); //将除了包含$(".text") 的<li> 元素的其他元素隐藏



        })
    });
</script>

</html>

效果

在这里插入图片描述