分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

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

发布时间:2023-09-06 02:02责任编辑:苏小强关键词:jsJSONP

主要借助百度搜索的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实现百度搜索框提示效果

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved