jquery搜索框代码

优势: 简化了 DOM 操作和事件处理。 提供了丰富的动画效果和 Ajax 支持。 跨浏览器兼容性好，减少了兼容性问题。
应用场景: 实现动态搜索和过滤功能。 创建交互式的用户界面元素。 处理表单验证和提交。

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。下面是一个简单的 jQuery 搜索框代码示例，包括 HTML 结构和 jQuery 脚本。

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Search Box</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="search-box" placeholder="Search...">
    <ul id="list">
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
        <li>Date</li>
        <li>Elderberry</li>
    </ul>

    <script src="search.js"></script>
</body>
</html>

jQuery 脚本 (search.js)

$(document).ready(function() {
    $('#search-box').on('keyup', function() {
        var value = $(this).val().toLowerCase();
        $('#list li').filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
    });
});

代码解释

HTML 结构:
- 创建一个输入框 (<input type="text" id="search-box" placeholder="Search...">) 用于输入搜索关键词。
- 创建一个无序列表 (<ul id="list">) 包含一些列表项 (<li>)，这些项将被搜索功能过滤显示。

jQuery 脚本:
- 使用 $(document).ready() 确保 DOM 完全加载后再执行脚本。
- 绑定 keyup 事件到搜索框，每当用户输入时触发。
- 获取输入框的值并转换为小写，以便进行不区分大小写的搜索。
- 使用 .filter() 方法遍历列表项，根据输入值过滤显示或隐藏列表项。