正文

学会用jQuery轻松实现三级联动与模糊查询，轻松选商品

/0 浏览量
0704

在电子商务网站中，商品分类和搜索功能是用户进行购物的重要环节。合理的设计可以极大地提升用户体验。本文将介绍如何使用jQuery轻松实现三级联动菜单与模糊查询功能，帮助用户快速找到心仪的商品。

一、三级联动菜单

1.1 HTML结构

首先，我们需要创建一个简单的HTML结构，用于展示商品分类的三级菜单。

<div id="category">
    <select id="level1"></select>
    <select id="level2"></select>
    <select id="level3"></select>
</div>

1.2 CSS样式

为了使菜单看起来更加美观，我们可以添加一些CSS样式。

#category select {
    margin-right: 10px;
    padding: 5px;
    width: 100px;
}

1.3 jQuery实现

接下来，使用jQuery来填充下拉菜单的内容。

$(document).ready(function() {
    // 假设我们有一个包含所有分类的数据数组
    var categories = [
        { id: 1, name: '电子产品', children: [
            { id: 11, name: '手机' },
            { id: 12, name: '电脑' }
        ]},
        { id: 2, name: '服装', children: [
            { id: 21, name: '男装' },
            { id: 22, name: '女装' }
        ]}
    ];

    // 填充第一级菜单
    var level1 = $('#level1');
    $.each(categories, function(index, item) {
        level1.append($('<option></option>').val(item.id).html(item.name));
    });

    // 第一级菜单选择事件
    level1.change(function() {
        var id = $(this).val();
        fillLevel2(id);
    });

    // 填充第二级菜单
    function fillLevel2(id) {
        var level2 = $('#level2');
        level2.empty();
        var children = $.grep(categories, function(item) {
            return item.id == id;
        })[0].children;
        $.each(children, function(index, item) {
            level2.append($('<option></option>').val(item.id).html(item.name));
        });

        // 清空第三级菜单
        $('#level3').empty();
    }

    // 第二级菜单选择事件
    $('#level2').change(function() {
        var id = $(this).val();
        fillLevel3(id);
    });

    // 填充第三级菜单
    function fillLevel3(id) {
        var level3 = $('#level3');
        level3.empty();
        var children = $.grep(categories, function(item) {
            return item.id == id;
        })[0].children;
        $.each(children, function(index, item) {
            level3.append($('<option></option>').val(item.id).html(item.name));
        });
    }
});

二、模糊查询

2.1 HTML结构

为了实现模糊查询功能，我们需要添加一个输入框和查询按钮。

<div id="search">
    <input type="text" id="searchInput" placeholder="请输入商品名称">
    <button id="searchButton">搜索</button>
</div>

2.2 jQuery实现

使用jQuery为查询按钮添加点击事件，实现模糊查询功能。

$('#searchButton').click(function() {
    var keyword = $('#searchInput').val();
    // 这里可以根据实际情况调用后端接口进行搜索
    // 假设我们有一个包含所有商品的数组
    var products = [
        { id: 1, name: '华为手机' },
        { id: 2, name: '小米电脑' },
        { id: 3, name: '阿迪达斯运动鞋' }
    ];

    // 模糊查询
    var result = $.grep(products, function(item) {
        return item.name.indexOf(keyword) !== -1;
    });

    // 显示搜索结果
    console.log(result);
});

通过以上步骤，我们可以轻松实现一个具有三级联动菜单和模糊查询功能的商品选择页面。在实际应用中，可以根据需求进行扩展和优化。

-- 展开阅读全文 --