先观察

对接口进行提炼：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=关键词&cb=回调函数

简单测试一下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>百度候选词</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script>

        let test = (data) => {

            console.log(data);

        }

    </script>

    <script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=dn&cb=test"></script>

</head>

<body>

    <!-- https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=关键词&cb=回调函数 -->

</body>

</html>

效果：

尝试把内容放入一个ul内：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>百度候选词</title>

</head>

<body>

    <ul id="myul"></ul>

    <script>

        // 为什么放ul的下面，可以看这篇文章：https://www.cnblogs.com/dotnetcrazy/p/10106976.html

        let test = (json) => {

            let ulobj = document.getElementById("myul");

            json.s.forEach(item => {

                let liobj = document.createElement("li");

                liobj.innerHTML = item;

                ulobj.appendChild(liobj);

            });

        }

        // https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=关键词&cb=回调函数

    </script>

    <script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=dn&cb=test"></script>

</body>

</html>

效果：

根据input输入动态获取

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>百度候选词</title>

    <script>

        // https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=关键词&cb=回调函数

        let show_ul = (json) => {

            let ul_obj = document.getElementById("myul");

            ul_obj.innerHTML = ""; // 清空现在的ul

            console.log(json.s);

            json.s.forEach(item => {

                let li_obj = document.createElement("li");

                li_obj.innerHTML = item;

                ul_obj.appendChild(li_obj);

            });

        }

        window.onload = () => {

            let input_obj = document.getElementById("myinput");

            input_obj.oninput = () => {

                // 用script加载的方式，只会执行一次，不满足我们的需求，so ==> 动态创建

                let script_obj = document.createElement("script");

                script_obj.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${encodeURIComponent(input_obj.value)}&cb=show_ul`

                document.body.appendChild(script_obj); //添加到body里面

            }

        }

    </script>

</head>

<body>

    <input type="text" id="myinput" />

    <ul id="myul"></ul>

</body>

</html>

效果：

线上测试

可行，下面就美化，然后放入自己项目的input中了

借助baidu的jsonp接口，做一个自己的候选词组件的更多相关文章

  1. 做一个可复用的 echarts-vue 组件（延迟动画加载）

    在 vue 项目使用 echarts 的场景中,以下三点不容忽视:1. 可视化的数据往往是异步加载的:2. 若一个页面存在大量的图表( 尤其当存在关系图和地图时 ),往往会导致该页面的渲染速度很慢并可 ...

  2. 做一个vue轮播图组件

    根据huangyi老师的慕课网vue项目跟着做的,下面大概记录了下思路 1.轮播图的图 先不做轮播图逻辑部分,先把数据导进来,看看什么效果.在recommend组件新建一个recommends的数组, ...

  3. 收集免费的接口服务,做一个api的搬运工

    hello, 大家好,今天给大家推荐的开源项目在某种程度上极大的方便了广大的开发者,这个开源项目统计了网上诸多的免费API,为广大开发者收集免费的接口服务,专心致志做一个API的搬运工,每月定时更新新 ...

  4. 领导让我重新做一个微信H5页面！

    leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...

  5. [转]jsPlumb插件做一个模仿viso的可拖拉流程图

    原贴:https://www.cnblogs.com/sggx/p/3836432.html 前言 这是我第一次写博客,心情还是有点小小的激动!这次主要分享的是用jsPlumb,做一个可以给用户自定义 ...

  6. .Net Core 3.0后台使用httpclient请求网络网页和图片_使用Core3.0做一个简单的代理服务器

    目标:使用.net core最新的3.0版本,借助httpclient和本机的host域名代理,实现网络请求转发和内容获取,最终显示到目标客户端! 背景:本人在core领域是个新手,对core的使用不 ...

  7. Struts2的jsonp接口实例

    和以往写struts2程序一样,action方法跳转到一个JSP中,为了配合jsonp的跨域,要在JSP中做一个输出 JSP: <%@ page language="java" ...

  8. 做一个能对标阿里云的前端APM工具（下）

    上篇请访问这里做一个能对标阿里云的前端APM工具(上) 样本多样性问题 上一小节中的实施方案是微观的,即单次性的.具体的.但是从宏观上看,我需要保证性能测试是公允的,符合大众预期的.为了达到这种效果, ...

  9. 有了lisk,为什么我们还要做一个Asch?

    0 前言 首先要声明一点,我们和我们的一些朋友都是lisk的投资人和支持者,我们也相信lisk会成功. 事实上,lisk已经成功了一半,目前在区块链领域融资金额排行第二,仅次于以太坊. 那为什么我们还 ...

随机推荐

  1. [转帖]Windows DHCPServer远程代码执行漏洞分析（CVE-2019-0626）

    Windows DHCPServer远程代码执行漏洞分析(CVE-2019-0626) ADLab2019-03-15共23605人围观 ,发现 4 个不明物体安全报告漏洞 https://www.f ...

  2. css3特殊图形（气泡）

    一.气泡 效果: body{ background: #dd5e9d; height: 100%; } .paopao { position: absolute; width: 200px; heig ...

  3. restful 规范（建议）

    需求:开发cmdb,对用户进行管理. 做前后端分离,后端写api(URL),对用户表进行增删改查,应该写四个URL(还要给文档(返回值,返回,请求成功,干嘛,失败,干嘛)),然后分别写视图函数. ht ...

  4. shiro框架的UsernamePasswordToken与对应Realm中的AuthenticationToken的一点比较

    这里以简单的登陆为例子 控制器对应的登陆方法: @RequestMapping(value = "/login", method = RequestMethod.GET) publ ...

  5. swagger bug

    https://blog.csdn.net/u011943534/article/details/81778125 处理swagger报错Could not resolve pointer: /def ...

  6. Delphi调用MSSQL存储过程返回的多个数据集的方法

    varaintf:_Recordset;RecordsAffected:OleVariant; begin ADOStoredProc1.Close;ADOStoredProc1.Open;aintf ...

  7. LodopJS代码模版的加载和赋值

    Lodop模版有两种方法,一种是传统的JS语句,可以用JS方法里的eval来执行,一种是文档式模版,是特殊格式的base64码,此篇博文介绍JS模版的加载和赋值.两种模版都可以存入一下地方进行调用,比 ...

  8. linux按时间查询日志

    在系统应用集中部署的时候,很多日志因为太多难以定位,获取某段时间的日志是对运维人员非常关键的事情. 一.sed查看某时间段到现在的系统日志: sed  -n  '/May 20 17/,$p'   / ...

  9. github上传时出现error: src refspec master does not match any解决办法22

    1 error:src refspec master does not match any这个问题,我之前也遇到过,这次又遇到了只是时间间隔比较长了,为了防止以后再遇到类似问题,还是把这个方法简单记录 ...

  10. linux用户、文件权限相关命令

    root 现代操作系统一般属于多用户的操作系统,也就是说,同一台机器可以为多个用户建立账户,一般这些用户都是为普通用户,这些普通用户能同时登录这台计算机,计算机对这些用户分配一定的资源. 普通用户在所 ...