附录5-淘宝搜索案例

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

目录

1  静态页面

2  JS

2.1  防抖

2.2  缓存建议信息

---

 

1  静态页面

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('
'+result[i][0]+'
')
        }
    }

    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('
'+result[i][0]+'
')
                }
    
                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')
})

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

2.1  防抖

首先搞一个定时器变量timer定义为null，目的是占住这个变量不让他因为undefined报错

之后在keyup事件中的开始都会消除timer计时器，在keyup事件的最后都会定义一个计时器。这样就会导致如果连续的触发keyup事件，上一个keyup的定时器就会被干掉，如果在500ms内不再次触发keyup，才会执行create_suggest()，这样可以减少一部分请求量，缓解服务器的压力

减小请求量的代价是增加了客户端的一些计算量，在部分情况下还是权衡一下是否加入防抖

2.2  缓存建议信息

缓存的目的也是为了减少请求量，如果用户之前输入过相同的keywords，那么就不要再请求了，直接用cacheObj变量里的信息就可以了

减轻服务端的代价同样是增加了客户端的压力，部分情况下需要考虑一下