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. ...
随机推荐
- crm使用soap启用和停用记录
function demo() { //操作记录的id var targetId = "a8a46444-ba10-e411-8a04-00155d002f02"; ...
- everything的使用
https://www.voidtools.com/support/everything/searching/ 打开多个everything进程 https://www.voidtools.com/s ...
- ArraySegment
第一个构造函数 Initializes a new instance of the ArraySegment<T> structure that delimits all the elem ...
- 杂项-Java:EL表达式
ylbtech-杂项-Java:EL表达式 EL(Expression Language) 是为了使JSP写起来更加简单.表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言,它提 ...
- Android对话框与Activity共存时的异常
异常提示信息 01-01 18:30:38.630: E/WindowManager(14537): Activity com.jack.outstock.activity.ManageCustomA ...
- A Round Peg in a Ground Hole(圆与凸包)
http://poj.org/problem?id=1584 题意:判断所给的点能不能形成凸包,并判断所给的圆是否在凸包内. 改了好几天的一个题,今天才发现是输入顺序弄错了,办过的最脑残的事情..sa ...
- codevs1959拔河比赛(二维费用背包)
1959 拔河比赛 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 一个学校举行拔河比赛,所有的人被分成了两组,每个人 ...
- springCloud多模块打包时报错问题
执行mvn clean package spring-boot:repackage,报错如下: [ERROR] Failed to execute goal org.springframework.b ...
- ACM_来自不给标题的菜鸟出题组(巴什博弈+素数判定)
来自不给标题的菜鸟出题组 Time Limit: 2000/1000ms (Java/Others) Problem Description: 大B和小b合作出一道程序设计月赛的题,他们的想法是给定一 ...
- shell 实用命令学习
查找文件 -iname 大小写不敏感 “*.log” .log后缀的文件 -type d 文件类型为目录的 find ./ -name 'index.html' 查找当前目录,及其子目录下文件