主要借助百度搜索的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. 使用oracle数据库和MySQL数据库时hibernate的映射文件.hbm.xml的不同

    假设是使用oracle数据库.那么hibernate的映射文件.hbm.xml例如以下: <id name="xuehao" column="xuehao" ...

  2. NTC 家电中的应用1

    NTC应用非常广,特别是家电产品中,基本上凡是涉及到温度控制的都会选择它.本人应用的的产品有打奶器.电烤箱,油炸锅,咖啡机,直发器,暖风机和电壁炉,尽管应用广.但都是千篇一律.当中最基本的要点是应用中 ...

  3. The Elder HDU - 5956

    /* 树上斜率优化 一开始想的是构造出一个序列 转化成一般的dp但是可能被卡 扫把状的树的话可能变成n*n 其实可以直接在树上维护这个单调队列 dfs虽然搞得是一棵树,但是每次都是dfs到的都是一个序 ...

  4. Elasticsearch源码分析—线程池(十一) ——就是从队列里处理请求

    Elasticsearch源码分析—线程池(十一) 转自:https://www.felayman.com/articles/2017/11/10/1510291570687.html 线程池 每个节 ...

  5. CPPCMS库在Windows下的使用

    标题:CPPCMS库在Windows下的使用时间:2012-7作者:Kagula 环境:[1]WinXP SP3[2]VisualStudio2008 SP1[3]ZLib 1.2.7[4]PCRE ...

  6. python多线程,限制线程数

    #encoding:utf8 import threading import time data = 0 def func(sleeptime): global data print threadin ...

  7. Area(pick定理)

    http://poj.org/problem?id=1265 题意:起始为(0,0),给出每个点的偏移量,求依次连接这些点形成的多边形边界上格点的个数. 思路:先将各个点的坐标求出存入,由pick定理 ...

  8. 关于函数提升在if语句中的表现

    函数声明创建的函数在现代浏览器,在if语句中函数的声明不会提升,但是在老的IE版本中,if语句中的函数声明会提升 函数表达式在不同浏览器中函数声明都不会被提升,解决了不同浏览器的兼容性问题 关于函数提 ...

  9. MySQL数据库中的delete语句

    在MySQL数据库中,只有在数据存在的情况下删除,才会返回受影响的行数.比如大于0的数,如果删除了不存在的数据,则会返回0:

  10. MySql c#通用类 转

    using System;using System.Data;using System.Configuration;using System.Collections.Generic;using Sys ...