码迷,mamicode.com
首页 > Web开发 > 详细

js借助JSONP实现百度搜索框提示效果

时间:2018-07-05 18:28:50      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:his   ext   i++   append   ISE   reject   body   select   百度搜   

主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题,代码如下(代码中部分使用ES6语法):

HTML

<input type="text" id="input">
<div id="text"></div>

js:

document.querySelector(‘#input‘).oninput = function () {
            let val = this.value;
            jsonp({
                url: ‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su‘,
                params: {wd: val},
                cb: ‘show‘
            }).then(res => {
                // console.log(res);
                let str = ‘<ul>‘;
                for (let i = 0, length = res.s.length; i < length; i++) {
                    str += `<li>${res.s[i]}</li>`
                }
                str += ‘</ul>‘
                document.querySelector(‘#text‘).innerHTML = str;
            }, err => {
                console.log(err)
            })

        }

        function jsonp({url,params,cb}) {
            return new Promise((resolve, reject) => {
                window[cb] = function (data) {
                    resolve(data);
                }
                params = { ...params,cb};              
                let arr = [];
                for (let key in params) {
                    arr.push(`${key}=${params[key]}`)
                }
                let script = document.createElement(‘script‘)
                script.src = `${url}?${arr.join("&")}`
                document.body.appendChild(script)
            })
        }

 

js借助JSONP实现百度搜索框提示效果

标签:his   ext   i++   append   ISE   reject   body   select   百度搜   

原文地址:https://www.cnblogs.com/web-wjg/p/9269681.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!