<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
请输入关键词<input id="keyword" type="text" value="" onkeyup="sugesst()"/>
<ul id="list">

</ul>
<script>
    //http://suggestion.baidu.com/su?wd='+keyword+'&cb=show
    function show(allData) {
        var data = allData.s;
        /*var str='';
        data.forEach(function (item) {
            str+='<li>'+item+'</li>';
            document.querySelector("#list").innerHTML=str;
        });
        if(document.querySelector("#keyword").value==""){
            document.querySelector("#list").innerHTML="";
        }*/
        //上边太麻烦，用map，map本身有返回值
        var strArr=data.map(function(item) {
           return '<li>'+item+'</li>';
        }).join();
        document.querySelector("#list").innerHTML=strArr;
        console.log(typeof strArr);
    }
    function sugesst() {
        var script = document.createElement("script");
        var keyword=document.querySelector("#keyword").value;
        script.src = 'http://suggestion.baidu.com/su?wd=' + keyword + '&cb=show';
        document.querySelector("body").appendChild(script);
    }
</script>
</body>
</html>

jsonp_百度联想的更多相关文章

  1. 网络系列之 jsonp 百度联想词

    jsonp 可以跨域,ajax 不可以,ajax 会受到浏览器的同源策略影响,何为同源策略? 同源策略就是,如果 A 网站 想拿 B网站里的资源, 那么 有三个条件, 你得满足才能拿. 第一个:域名相 ...

  2. SSH综合练习-仓库管理系统-第二天

    SSH综合练习-仓库管理系统-第二天 今天的主要内容: 货物入库 页面信息自动补全回显功能:(学习目标:练习Ajax交互) 根据货物简记码来自动查询回显已有货物(Ajax回显) 根据货物名来自动查询补 ...

  3. 初学pyhon的几个练习小程序

    一.概述 此程序示例为博主根据路飞学城的python的作业而写的(博主也是python初学者,仅花了99元报了路飞学城的python入门14天集中营3期网络课堂班),此程序非常适合python初学者拿 ...

  4. 计算机网络之JSONP跨域

    JSONP跨域实现原理 百度联想词跨域实现 一.JSONP跨域实现原理 1.Web页面使用<script>引入JS文件时不受同源策略的影响.准确的说,所有拥有src属性的标签都不受同源策略 ...

  5. Day2课后作业：三级菜单简单版

    menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, '谷歌':{} }, '中关村':{ '爱奇艺':{}, '汽车之家':{}, 'youku':{ ...

  6. 自定义chrome新标签页

    [跳转GitHub] chromeNewTab 自定义chrome新标签页.由于不想发布到chrome应用商店,因此搜了一下不用开发者模式就能用的方法. 使用说明 下载chrome的一个[window ...

  7. 新建Chrome标签页，极简+自用

    [跳转GitHub] chromeNewTab 已经入坑Chrome应用开发者,可以去:[应用商店地址]直接添加使用. 使用说明 下载chrome的一个[window组策略文件],解压文件后找到(\p ...

  8. SEO优化技术的简介

    严格来讲,seo技术没有所谓的严格的黑帽与白帽之分.即使是正常的301重定向,在某些情况下也能作用于黑帽seo技术.我们能判定一个人是真正的好人还是坏人么?答案是否定的.之所以解密所谓的黑帽seo,是 ...

  9. selenium定位元素方法汇总

    #打开网页前三步 from selenium import webdriver driver=webidriver.Chrome() driver.get("https://www.baid ...

随机推荐

  1. 自己从0开始学习Unity的笔记 VII （C#中类继承练习）

    好久都没有写了.今天做了类继承的练习,做了一个小队,进行简单的判定. namespace 兵团建立练习 { class ServantBasics { public string name; //pr ...

  2. Asp.NetCore取配置信息

    本文简单介绍Asp.NetCore取自定义配置信息的方法,要取配置信息首先得有配置文件. 1, 本例新建了一个TimeOut.json配置文件,和其对应的一个TimeOut类 2, 首先在Startu ...

  3. UWP开发入门（二）——RelativePanel

    RelativePanel也是Win10 UWP新增的控件,和上篇提到的SplitView一样在UWP的UI布局起到非常重要的作用.说句实在话,这货其实就是为了UWP的Adaptive UI而特意增加 ...

  4. java invoke(转摘)

      JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法:这种动态获取的以及动态调用对象的方法的功能称为java语言的反射机制 ...

  5. java学习笔记—HttpServletResponse（21）

    public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, ...

  6. php留言系统（9）

    1.参照之前的(mvc框架总结)将整体框架定下来之后,那么请求默认参数将变为: //默认请求首页: //P=front //C=fIndex //A=show 1.1     找到控制器fIndexC ...

  7. kvm虚拟化存储池配置

    1.创建基于文件夹的存储池(目录) 2.定义存储池与其目录 # virsh pool-define-as vmdisk --type dir --target /data/vmfs 3.创建已定义的存 ...

  8. IT男装逼利器：如何像黑客一样聊天 Mojo-Webqq

    电影里的黑客们聊天不想我们生活中的一样,用QQ.微信的客户端,都是通过命令行来进行聊天交流的,大概是为了提升逼格吧.(文末有福利~) 本文作者:KevinSVIP 今天发现一个有趣的项目:使用mojo ...

  9. [CISCO] 转载：冲突域与广播域（区别、知识要点）

    [CISCO] 转载:冲突域与广播域(区别.知识要点) 1.传统以太网操作(Ethernet Connection Ethernet) 传统共享式以太网的典型代表是总线型以太网.在这种类型的以太网中, ...

  10. python基础之循环

    一.while循环 如果条件成立(true),重复执行相同操作,条件不符合,跳出循环 while   循环条件: 循环操作 (1)while循环示例 例:输入王晓明5门课程的考试成绩,计算平均成绩 i ...