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. ...
随机推荐
- 深入浅出web服务
对于没有做过web开发的人来说,web开发涉及到的名词似乎特别多,apache.nginx,cgi,php,http,cookie.session.这一大坨东西究竟是什么,这里我们就从网络的层面去理清 ...
- Windows 驱动开发 - 8
最后的一点开发工作:跟踪驱动. 一.驱动跟踪 1. 包括TMH头文件 #include "step5.tmh" 2. 初始化跟踪 在DriverEntry中初始化. WPP_INI ...
- 1360 xth 的玫瑰花
1360 xth 的玫瑰花 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解 题目描述 Description 这天是rabbit 的生日 ...
- 支付宝即时到帐接口的python实现,演示样例採用django框架
因工作须要研究了支付宝即时到帐接口.并成功应用到站点上,把过程拿出来分享. 即时到帐仅仅是支付宝众多商家服务中的一个,表示客户付款,客户用支付宝付款.支付宝收到款项后,立即通知你,而且此笔款项与交易脱 ...
- ambarella H2 添加文件到ext4文件系统
方法1: ambarella/rootfs目录下有skeleton(骨架)目录,此目录下就是文件系统的各个目录, [root@jz4775dev]# ls skeleton/ bin debug de ...
- Fisher 线性判别
Multiplying both sides of this result by wT and adding w0, and making use of y(x)=wTx+w0 and y(xΓ)= ...
- nodejs express开发
用NodeJS+Express开发WEB应用---第一篇 大漠穷秋2014-03-28 预热 为了对后面的内容理解更加透彻,推荐首先阅读下面这篇很好的文章: http://www.nodebeginn ...
- Gym - 101981M The 2018 ICPC Asia Nanjing Regional Contest M.Mediocre String Problem Manacher+扩增KMP
题面 题意:给你2个串(长度1e6),在第一个串里找“s1s2s3”,第二个串里找“s4”,拼接后,是一个回文串,求方案数 题解:知道s1和s4回文,s2和s3回文,所以我们枚举s1的右端点,s1的长 ...
- 通过学习Date和Calendar时写的日历
package com.etc.util; import java.util.Calendar; import java.util.Scanner; public class Calendar2 { ...
- 算法之dfs篇
dfs算法是深度搜索算法.从某一节点开始遍历直至到路径底部,如果不是所寻找的,则回溯到上个节点后,再遍历其他路径.不断重复这个过程.一般此过程消耗很大,需要一些优化才能保持算法的高效. hdu1010 ...