正文

jquery模糊查询 jquery模糊查询下拉框

小编
小编 V管理员 /0 评论 /29 阅读
1225
欧意国内注册

jQuery模糊查询的实现方法

在Web开发中，我们经常需要对用户输入的数据进行模糊查询，jQuery作为一个广泛使用的JavaScript库，提供了丰富的API来实现这一功能，本文将介绍如何使用jQuery实现模糊查询。

1、基本概念

模糊查询是指在查找数据时，允许用户输入部分关键字，系统会自动匹配包含这些关键字的数据，当用户在搜索框中输入“j”时，系统会返回所有包含“j”的记录，如“java”、“javascript”等。

2、jQuery模糊查询的方法

jQuery提供了多种方法来实现模糊查询，其中最常用的是filter()方法和contains()方法。

（1）filter()方法

filter()方法用于筛选匹配的元素，它接受一个函数作为参数，该函数会对每个元素执行一次，返回一个布尔值，如果函数返回true，则该元素会被保留；如果返回false，则会被移除。

以下是一个简单的示例，展示了如何使用filter()方法实现模糊查询：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery模糊查询示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="search" placeholder="请输入关键字">
    <ul id="list">
        <li>apple</li>
        <li>banana</li>
        <li>orange</li>
        <li>grape</li>
    </ul>
    <script>
        $(document).ready(function() {
            $("#search").on("input", function() {
                var keyword = $(this).val();
                $("#list li").filter(function() {
                    return $(this).text().indexOf(keyword) !== -1;
                }).show();
                $("#list li").not(":visible").hide();
            });
        });
    </script>
</body>
</html>

在这个示例中，我们创建了一个搜索框和一个包含水果名称的列表，当用户在搜索框中输入关键字时，我们使用filter()方法筛选出包含关键字的列表项，并显示它们，隐藏不包含关键字的列表项。

（2）contains()方法

contains()方法用于检查一个字符串是否包含另一个字符串，它接受两个参数：第一个参数是要检查的字符串，第二个参数是要查找的字符串，如果第一个字符串包含第二个字符串，则返回true；否则返回false。

以下是一个简单的示例，展示了如何使用contains()方法实现模糊查询：

<div class="item">apple</div>
<div class="item">banana</div>
<div class="item">orange</div>
<div class="item">grape</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $("#search").on("input", function() {
            var keyword = $(this).val();
            $(".item").hide();
            $(".item:contains('" + keyword + "')").show();
        });
    });
</script>

在这个示例中，我们创建了一个搜索框和四个包含水果名称的div，当用户在搜索框中输入关键字时，我们使用contains()方法筛选出包含关键字的div，并显示它们，隐藏不包含关键字的div。