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. ...
随机推荐
- 加州理工学院公开课:机器学习与数据挖掘_Regularization(第十二课)
课程简单介绍: 接上一节课,这一节课的主题是怎样利用 Regularization 避免 Overfitting.通过给如果集设定一些限制条件从而避免 Overfitting,可是如果限制条件设置的 ...
- HashMap源代码剖析
大部分思路都是一样的 .仅仅是一些细节不一样.源代码中都标了出来.jdk容器源代码还是挺简单的. public class HashMap<K,V> extends AbstractMap ...
- BZOJ 2440 中山市选2011 全然平方数 二分答案+容斥原理+莫比乌斯反演
题目大意:求第k个无平方因子数是多少(无视原题干.1也是全然平方数那岂不是一个数也送不出去了? 无平方因子数(square-free number),即质因数分解之后全部质因数的次数都为1的数 首先二 ...
- android Service not registered
Caused by: java.lang.IllegalArgumentException: Service not registered:com.broadcom.bt.app.settings.S ...
- GYM 100741A Queries(树状数组)
A. Queries time limit per test 0.25 seconds memory limit per test 64 megabytes input standard input ...
- Oracle 字符拼接
使用的是ORACLE中的cast函数: 官方链接: https://docs.oracle.com/cd/E11882_01/server.112/e41084/functions023.htm#SQ ...
- B - Alyona and mex(构造)
Problem description Alyona's mother wants to present an array of n non-negative integers to Alyona. ...
- 自动换行 word-break:break-all和word-wrap:break-word
1.word-break:break-all;当内容(比如很长的一个单词)到每行的末端时,它会把单词截断显示一部分,下一行显示后一部分. 2.word-wrap:break-word;当内容(比如很长 ...
- 协议(Protocol) 和代理(Delegate)
1.概念与组成 delegate是iOS中一种常见的设计模式,是一种消息传递的的方式,常见的消息传递方式还有以下几种: 通知:在iOS中由通知中心进行消息接收和消息广播,是一种一对多的消息传递方式. ...
- MatLab之Simulink之simple model
Use Simulink to model a system and then simulate the dynamic behavior of that system. 1 Open in Comm ...