防抖百度搜索

防抖百度搜索

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box {
            margin: 100px;
        }
        #wd{
            width: 400px;
            height: 40px;
        }
        #list{
            display: none;
            width: 400px;
            border: 1px solid #ccc;
        }
        li{
            list-style: none;
            padding: 5px;
        }
        a{
            text-decoration: none;
            color: #333;
        }

    </style>

   <div id="box">
        <input type="text" id="wd">
        <ul id="list"></ul>      
    </div>

js部分

    <script>
        var wd = document.getElementById('wd');
        var oUl = document.getElementById('list');

        wd.oninput = debounce(getUserAction, 100, false);
        function debounce(func, wait, immediate) {      
            var timer = null; 
            var result;
            var debounced = function () {
                var _this = this;
                var argu = arguments;
                clearTimeout(timer);
                if(immediate) {
                    if(!timer) func.apply(_this, argu);
                    timer = setTimeout(function () {
                        timer = null;
                    }, wait) 
                }else {
                    timer = setTimeout(function () {
                        func.apply(_this, argu);
                    }, wait)
                }
                return result;
            }
            debounced.cancel = function () {
                clearTimeout(timer);
                timer = null;
            }
            return debounced;
        }
        function getUserAction() {
            if(wd.value) {
                var oScript = document.createElement('script');
                oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + wd.value +'&cb=doJson';
                document.body.appendChild(oScript);
                document.body.removeChild(oScript);
            }else {
                oUl.style.display = 'none';
            }
        }
        function doJson(data) {
            var dataList = data.s;
            oUl.innerHTML = '';
            if(dataList.length == 0) {
                oUl.style.display = 'none';
            }else {
                dataList.forEach(function(item, index) {
                    var oLi = document.createElement('li');
                    var oA = document.createElement('a');
                    oA.href = 'https://www.baidu.com/s?wd=' + item;
                    oA.innerText = item;
                    oLi.appendChild(oA);
                    oUl.appendChild(oLi);
                    oUl.style.display = 'block';
                })  
            }
            
        }
    
    
    </script>
    
</body>
</html>