先观察

对接口进行提炼：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 创建外部表

    Oracle 外部表能迅速的将海量的数据导入到数据库里面,外部表的创建使用步骤如下: 1 创建一个Directory:必须用sys用户创建,用户存放外部数据文件. create directory D ...

  2. PMP三点

    三点估算:悲观36天,可能21天,乐观6天.在16至26天内完成的概率是多少?这个算法是PERT估算最终估算结果=(悲观工期+乐观工期+4×最可能工期)/6=(36+6++4*21)/6=21标准差= ...

  3. QTP自动化测试-按行取值（win10下输入？问题）-笔记20181119

    在win10下运行qtp10 所有输入汉字都会为?,在win7下可以.查询了百度.bingo没有解决问题.当前的解决办法 ,在脚本中使用DataTable取数据值,添加2行记录,一行使用汉字,一行使用 ...

  4. delphi 怎么实现主窗口退出时，有一个提示框？

    无论点窗口上的[按钮]还是[右上角的叉],能出现一个提示窗口,“是”-退出窗口,“否”-重新登录(调出登录窗口),“取消”-返回.MessageBox能实现吗?还是要调用新窗口(我调用窗口,有些错误) ...

  5. java、二维数组详解！

    /* java 二维数组的概念 使用方法! 1.什么是二维数组? 答案:数组的数组! 他的每一个元素都是数组!二维数组是(存储一维数组的)一维数组. 2.如何定义?(以二维数组为列) int arr[ ...

  6. Redis 禁用FLUSHALL FLUSHDB KEYS 命令

      (error) ERR unknown command 'keys'问题解决(error) ERR unknown command 'FLUSHDB' 问题解决 背景 FLUSHALL FLUSH ...

  7. window.location.href ie 不兼容问题

    今天再做项目演示的时候,用的是ie浏览器报错404,项目都运行好久了,第一次用ie就这样了悲剧,贴下解决方法吧 function getContextPath() { var pathName = d ...

  8. C#，单元测试

    C#,单元测试入门(以下内容可能来自网络) 一.什么叫单元测试(unit testing)? 是指对软件中的最小可测试单元进行检查和验证.对于单元测试中单元的含义,一般来说,要根据实际情况去判定其具体 ...

  9. C#程序中设置全局代理(Global Proxy)

    1. HttpWebRequest类的Proxy属性,只要设置了该属性就能够使用代理了,如下: 1             //设置代理 2         WebProxy WP = new Web ...

  10. Html5 拖拽api

    拖拽要有两个元素,一个是要拖动的元素,一个是要放置到的元素. 1, 在默认情况下, 只有图片和文字是可以拖拽的,其它元素都不可以.因此要想使一个元素可拖动,必须设置它的draggable 属性为tru ...