百度搜索下拉提示

最新推荐文章于 2021-10-18 22:31:52 发布

WY媛媛

最新推荐文章于 2021-10-18 22:31:52 发布

阅读量183

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wyyyyyyyyyyyyyyy/article/details/105334999

版权


```javascript
<body>
    <p>搜索 <input type="text" id="ipt"></p>
    <ul id="search-list">
    </ul>
    <script src="./utils.js"></script>
    <script>
        // 1. 测试接口; 浏览器的接口测试;
        // 2. 代码接口测试 : 请求测试没有问题;
        // jsonp("https://www.baidu.com/sugrec" , function(res){
        //     console.log(res);
        // } , "cb" , {
        //     prod : "pc",
        //     sugsid : "1423,31169,21125,30839,31187,30823,22159",
        //     wd : "hello world"
        // });

        // 实现需求;
        // 考虑交互目标 ; 

        // 用户输入内容 : 事件; => oninput
        // 把用户输入的内容发送给后端 : jsonp;

        _("#ipt").oninput = function(){
            var value = this.value;
            // console.log(value);
            // 发送给后端;
            var data = {
                wd : value
            }

            jsonp("https://www.baidu.com/sugrec" , function(res){
                renderSearch(res);
            } , "cb" , assign({
                prod : "pc",
                sugsid : "1423,31169,21125,30839,31187,30823,22159",
            }, data));
        }

        function renderSearch(res){
            var search_list = res.g;
            var html = "";
            if( search_list === undefined ){
                return  _("#search-list").innerHTML = html;
            }
            search_list.forEach( function( item ){
                html += "<li>"+ item.q +"</li>"
            })
            _("#search-list").innerHTML = html;
        }

    </script>
</body>


**

## *utils.js*

**

```javascript
function isObject( data ){
    return (typeof data === "object" &a

最低0.47元/天解锁文章

WY媛媛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度搜索下拉提示

```javascript<body> <p>搜索 <input type="text" id="ipt"></p> <ul id="search-list"> </ul> <script src="./utils.js"></script> <scri...
复制链接

扫一扫