附录5-淘宝搜索案例

Suyuoa

于 2022-12-01 17:10:38 发布

阅读量205

点赞数

分类专栏： Ajax笔记文章标签： html css 前端

本文链接：https://blog.csdn.net/potato123232/article/details/128135210

版权

Ajax笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

效果是这样的，用JSONP拿到淘宝的搜索建议然后展示出来

1 静态页面

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="initialization.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <img src="image/logo.png" alt="">
    <section class="search">
        <div class="search_head">
            <span class="search_head_activate">宝贝</span>
            <span>店铺</span>
        </div>
        <div class="search_content">
            <input type="text">
            <button>搜&nbsp&nbsp&nbsp&nbsp索</button>
        </div>
        <div class="search_suggest">
            <!-- <div class="search_suggest_activate">阿迪达斯</div>
            <div>阿迪达斯</div>
            <div>阿迪达斯</div>
            <div>阿迪达斯</div>
            <div>阿迪达斯</div>
            <div>阿迪达斯</div>
            <div>阿迪达斯</div>
            <div>阿迪达斯</div>
            <div>阿迪达斯</div>
            <div>阿迪达斯</div> -->
        </div>
    </section>
</body>
<script src="../../../../jquery-3.6.1.min.js"></script>
<script src="index.js"></script>
</html>

css

img {
    display: block;
    margin:50px auto;
}
section {
    width:70%;
    margin:0 auto;
    .search_head {
        span {
            padding:2px 10px;
            font-size:12px;
        }
        .search_head_activate {
            background-color: rgb(254,87,1);
            color:white;
        }
    }
    .search_content {
        display: flex;
        input {
            width:80%;
            padding:5px;
            border:3px solid rgb(254,87,1);
            outline: none;
        }
        button {
            width:20%;
            margin-left:0px;
            border:1px solid transparent;
            color:white;
            background-color: rgb(254,87,1);
        }
    }
    .search_suggest {
        display: none;
        width:79.7%;
        border:1px solid gray;
        div {
            padding:5px;
            cursor:pointer;
        }
        .search_suggest_activate {
            background-color: rgb(237,239,237);
        }
    }
}

2 JS

自己写代码的时候先将思路写下来，像是防抖，缓存这些东西，先跑通之后再加

timer = null
cacheObj = {}

function create_suggest(keywords) {
    if (cacheObj[keywords]) {
        $('.search_suggest').empty()
        $('.search_suggest').show()
        result = cacheObj[keywords]
        for (i in result) {
            console.log(result[i][0])
            $('.search_suggest').append('<div>'+result[i][0]+'</div>')
        }
    }

    else {
        $.ajax({
            url:'https://suggest.taobao.com/sug?q=' + keywords,
            dataType:'jsonp',
            success:function(res) {
                $('.search_suggest').empty()
                $('.search_suggest').show()
                result = res.result
                for (i in result) {
                    console.log(result[i][0])
                    $('.search_suggest').append('<div>'+result[i][0]+'</div>')
                }
    
                cacheObj[keywords] = result
            }
        })
    }
}

$('input').on('keyup',function() {
    clearTimeout(timer)
    keywords = $(this).val()
    if (keywords == '') {
        $('.search_suggest').hide()
    }
    else {
        timer = setTimeout(function() {create_suggest(keywords)},500)
    }
})

$('.search_suggest').on('mouseover','div',function() {
    $(this).addClass('search_suggest_activate').siblings().removeClass('search_suggest_activate')
})

像是请求，添加元素这些我们之前都用过就不进行介绍了，首先介绍防抖