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借助JSONP实现百度搜索框提示效果的更多相关文章
- Ajax跨域:Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框
使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- JavaScript实现模糊推荐的input框(类似百度搜索框)
如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...
- typecho博客组插件:openSug.js百度搜索框下拉提示免费代码
Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...
- Springboot+Vue实现仿百度搜索自动提示框匹配查询功能
案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...
- Ajax以及类似百度搜索框的demo
public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...
- React实现最完整的百度搜索框
import React,{Component} from 'react' import ReactDOM,{render} from 'react-dom' import 'bootstrap/di ...
- JS---DOM---案例:模拟百度搜索框
模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
随机推荐
- CF 447A(DZY Loves Hash-简单判重)
A. DZY Loves Hash time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- ip地址转换成16进制long
<span style="font-size:18px;">public class IpUtil { /** * ip地址转换成16进制long * @param i ...
- Mac safari 下iframe的hash取不到BUG
RT http://192.168.1.66/salaryl#abc 这样的链接是取不到hash的, 需要在最后加上斜杠,如下:http://192.168.1.66/salaryl/#abc fuc ...
- SQL 琐碎记录
1. 查看mysql现在已提供什么存储引擎: SHOW ENGINES ; 2. 查看mysql当前默认的存储引擎: SHOW VARIABLES LIKE '%storage_engine%'; 3 ...
- Spring:延迟初始化
ApplicationContext实现的默认行为就是在启动时将所有singleton bean提前进行实例化.提前实例化意味着作为初始化过程的一部分,ApplicationContext实例会创建并 ...
- 2017 Multi-University Training Contest - Team 2&&hdu 6047 Maximum Sequence
Maximum Sequence Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- [NOI2018]归程(80pts)
https://www.zybuluo.com/ysner/note/1219964 题面 题面太长,难以概述,[戳我][1] \(ex10pts\ tree\) \(50pts\ n\leq1500 ...
- 一、SQL系列之~使用SQL语言导出数据及实现定时导出数据任务
一般情况下,SQL数据库中带有导入与导出数据的直接按键操作,点击数据表所在的数据库--任务--导出/导入数据,根据导入/导出向导直接将数据导出即可. 但导出的数据格式多为Excel格式,如果需要导出的 ...
- 【DP】编辑距离
日常吐槽:关于DP,有一种莫名的恐惧...maybe源于与mtw大佬与quantum11大佬,初中时抬老师爬楼梯的经历... 言归正传: 编辑距离 [题目描述] 设A和B是两个字符串.我们要用最少的字 ...
- POJ 1330 Tarjan LCA、ST表(其实可以数组模拟)
题意:给你一棵树,求两个点的最近公共祖先. 思路:因为只有一组询问,直接数组模拟好了. (写得比较乱) 原题请戳这里 #include <cstdio> #include <bits ...