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


    主要借助百度搜索的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点击事件,数字累加
    html中hr的各种样式使用
    基于Bootstrap垂直响应的jQuery时间轴特效
    bootstrop日历
    前端经验
    bootstrop登陆页面
    bootstrop设置背景图片自适应屏幕
    建立博客的第一天
    php伪静态--隐藏地址实际路径方法
  • 原文地址:https://www.cnblogs.com/web-wjg/p/9269681.html
Copyright © 2020-2023  润新知