jquery下拉框联动模糊展示

原创

mob64ca12f831ae 2024-08-09 08:10:28 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12f831ae的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery下拉框联动模糊展示的实现

在现代Web开发中，联动下拉框（Cascade Select）是一种常见的用户交互方式。用户选择一个下拉框中的选项后，另一个下拉框中的选项会根据第一个下拉框的选择而动态改变。如果我们再添加模糊搜索的功能，用户可以更轻松地找到他们需要的选项。本文将带你从头到尾实现这个功能。

流程概述

下面是实现“jQuery下拉框联动模糊展示”的大致流程：

步骤	描述
1	准备HTML结构
2	引入jQuery库
3	编写JavaScript代码实现联动和模糊搜索
4	测试并优化

步骤详细说明

1. 准备HTML结构

首先，我们需要一个基本的HTML结构，其中包括两个下拉框和一个文本搜索框。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉框联动模糊展示</title>
    <script src="
</head>
<body>
    下拉框联动模糊展示
    <label for="category">类别：</label>
    <select id="category">
        <option value="">请选择类别</option>
        <option value="fruits">水果</option>
        <option value="vegetables">蔬菜</option>
    </select>

    <label for="items">项目：</label>
    <select id="items">
        <option value="">请选择项目</option>
    </select>

    <label for="search">搜索：</label>
    <input type="text" id="search" placeholder="搜索项目..." />
    
    <script src="script.js"></script>
</body>
</html>

2. 引入jQuery库

我们在HTML的<head>标签中已引入jQuery库，其中包含了“联动”和“模糊搜索”的功能。确保CDN不受到限制，可以顺利加载。

3. 编写JavaScript代码实现联动和模糊搜索

接下来在script.js文件中编写下面的代码：

// script.js
$(document).ready(function () {
    // 定义每个类别下对应的项目
    const data = {
        fruits: ['苹果', '香蕉', '橙子', '葡萄', '草莓'],
        vegetables: ['胡萝卜', '西红柿', '菠菜', '黄瓜', '土豆']
    };

    // 当类别选择发生变化
    $('#category').change(function () {
        const category = $(this).val();
        const itemsSelect = $('#items');

        // 清空项目下拉框并重置选项
        itemsSelect.empty().append('<option value="">请选择项目</option>');

        if (data[category]) {
            data[category].forEach(item => {
                itemsSelect.append(`<option value="${item}">${item}</option>`);
            });
        }
    });

    // 模糊搜索功能
    $('#search').on('input', function () {
        const searchTerm = $(this).val().toLowerCase();
        $('#items option').filter(function () {
            $(this).toggle($(this).text().toLowerCase().indexOf(searchTerm) > -1);
        });
    });
});

代码释义：

使用$(document).ready()确保DOM元素加载后再执行我们的JavaScript。
const data定义了一个对象，用于存储每个类别对应的项目。
$('#category').change()事件监听下拉框#category的变化，更新#items下拉框的选项。
$('#search').on('input()实现动态过滤#items中选项的模糊搜索。

4. 测试并优化

打开浏览器，查看下拉框和搜索框是否正常工作。
如果有任何bug，检查控制台输出并修复代码。
优化UI设计和用户体验。

类图和状态图

为了更好地理解系统结构和状态转换，下面是相应的类图和状态图。

类图

classDiagram
    class Dropdown {
        +select category
        +select items
    }
    class Search {
        +string input
    }
    Dropdown --> Search : has

状态图

stateDiagram
    [*] --> Idle
    Idle --> CategorySelected : 选择类别
    CategorySelected --> ItemsUpdated : 更新项目列表
    ItemsUpdated --> Searching : 输入搜索内容
    Searching --> ItemsFiltered : 过滤选项
    ItemsFiltered --> [*]