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

  1. Ajax跨域:Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  2. 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框

    使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  3. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

  4. typecho博客组插件:openSug.js百度搜索框下拉提示免费代码

      Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...

  5. Springboot+Vue实现仿百度搜索自动提示框匹配查询功能

    案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...

  6. Ajax以及类似百度搜索框的demo

    public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...

  7. React实现最完整的百度搜索框

    import React,{Component} from 'react' import ReactDOM,{render} from 'react-dom' import 'bootstrap/di ...

  8. JS---DOM---案例:模拟百度搜索框

    模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...

  9. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

随机推荐

  1. 加州理工学院公开课:机器学习与数据挖掘_Regularization(第十二课)

    课程简单介绍: 接上一节课,这一节课的主题是怎样利用 Regularization 避免 Overfitting.通过给如果集设定一些限制条件从而避免  Overfitting,可是如果限制条件设置的 ...

  2. HashMap源代码剖析

    大部分思路都是一样的 .仅仅是一些细节不一样.源代码中都标了出来.jdk容器源代码还是挺简单的. public class HashMap<K,V> extends AbstractMap ...

  3. BZOJ 2440 中山市选2011 全然平方数 二分答案+容斥原理+莫比乌斯反演

    题目大意:求第k个无平方因子数是多少(无视原题干.1也是全然平方数那岂不是一个数也送不出去了? 无平方因子数(square-free number),即质因数分解之后全部质因数的次数都为1的数 首先二 ...

  4. android Service not registered

    Caused by: java.lang.IllegalArgumentException: Service not registered:com.broadcom.bt.app.settings.S ...

  5. GYM 100741A Queries(树状数组)

    A. Queries time limit per test 0.25 seconds memory limit per test 64 megabytes input standard input ...

  6. Oracle 字符拼接

    使用的是ORACLE中的cast函数: 官方链接: https://docs.oracle.com/cd/E11882_01/server.112/e41084/functions023.htm#SQ ...

  7. B - Alyona and mex(构造)

    Problem description Alyona's mother wants to present an array of n non-negative integers to Alyona. ...

  8. 自动换行 word-break:break-all和word-wrap:break-word

    1.word-break:break-all;当内容(比如很长的一个单词)到每行的末端时,它会把单词截断显示一部分,下一行显示后一部分. 2.word-wrap:break-word;当内容(比如很长 ...

  9. 协议(Protocol) 和代理(Delegate)

    1.概念与组成 delegate是iOS中一种常见的设计模式,是一种消息传递的的方式,常见的消息传递方式还有以下几种: 通知:在iOS中由通知中心进行消息接收和消息广播,是一种一对多的消息传递方式. ...

  10. MatLab之Simulink之simple model

    Use Simulink to model a system and then simulate the dynamic behavior of that system. 1 Open in Comm ...