先观察

对接口进行提炼：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. Linux的基本解读

    Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统 而严格来讲,Linux这个词本身只表示Linux内核,但实际上人 ...

  2. 并发包 concurrent(一) Atomic

    1:基础概念 悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁.传 ...

  3. 如何让pl/sql developer记住密码，实现快速登录

    前两天,有同事使用plsql的时候,切换数据库的时候需要不断的重复输入密码,这样太麻烦了. 下面,我这里说下如何的实现plsql不需要输入密码就能快速登录的方法: 1.一开始登录,首先像往常那样输入密 ...

  4. 模仿jdk编译代码去除注释,多行注释

    package com.jachs.mvc; import java.*; import ch.qos.logback.classic.net.SyslogAppender; /**** * * @a ...

  5. 关于手机端适配的问题（rem，页面缩放）

    关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...

  6. Java-Spring-获取Request,Response对象

    转载自:https://www.cnblogs.com/bjlhx/p/6639542.html 第一种.参数 @RequestMapping("/test") @Response ...

  7. cmd & tree & bash

    cmd & tree & bash bug E: Unable to locate package tree solution # 1. update $ sudo apt-get u ...

  8. ReCAPTCHA & 手势验证

    手势验证 recaptcha https://www.vaptcha.com/ https://www.vaptcha.com/document https://www.iviewui.com/com ...

  9. 开机自动获取spark用户名和服务器

    import os.path import getpass import platform import time username = getpass.getuser() #获取当前用户名 home ...

  10. QTP 自动货测试桌面程序-笔记-运行结果中添加截图

    3种方法: 方法1:使用设置:SnapshotReportMode oldMode = Setting("SnapshotReportMode") Setting("Sn ...