先观察

对接口进行提炼：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. Oracle如何扩展表空间

    一: --查看表空间的名字及文件所在位置 select tablespace_name, file_id, file_name, ), ) total_space from sys.dba_data_ ...

  2. 通过 MySQL 存储原理来分析排序和锁(转)

    先抛出几个问题 为什么不建议使用订单号作为主键? 为什么要在需要排序的字段上加索引? for update 的记录不存在会导致锁住全表? redolog 和 binlog 有什么区别? MySQL 如 ...

  3. zTree树形菜单交互选项卡效果实现

    1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html> <head> <meta ch ...

  4. java随笔5 完整路径的应用

    不仅类,函数,甚至参数都可以获取完整路径

  5. HTML4到HTML5

    第一步: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0.1//EN" "http://www.w3.org/TR/html ...

  6. mongodb3的使用

    1.在windows下载安装mongodb 将下载好的zip压缩文件解压并重命名为mongo-3.0.6,并在根目录下新建文件夹data用于存放数据 2.启动mongod守护进程 使用命令mongod ...

  7. Lodop打印设计、维护、预览、直接打印简单介绍

    四者的区别和联系:(其中PRINT_DESIGN打印设计是提供给开发人员的,另外三个可开放给用户)PRINT_DESIGN打印设计:辅助开发人员设计,图形化拖动插入修改等,设计完成后,生成代码拷贝到程 ...

  8. nginx rewrite重写

    通过官方文档可以看到,rewrite的作用上下文是   server location,可以写在 server里面  亦或location里面; 命令: if (条件) {} 条件判断 set #设置 ...

  9. 5.cgroup资源控制

    控制组( CGroups)是 Linux 内核的一个特性,主要用来对共享资源进行隔离.限制.审计等. 只有将分配到容器的资源进行控制,才能避免多个容器同时运行时对宿主机系统的资源竞争.每个控制组是一组 ...

  10. 一般服务器端口号的反斜杠表示访问webapp下的资源