<!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. 接口IDisposable的用法

    C#的每一个类型都代表一种资源,而资源又分为两类: 托管资源  由CLR管理分配和释放的资源,即从CLR里new出来的对象. 非托管资源  不受CLR管理的对象,如Windows内核对象,或者文件.数 ...

  2. JS 面向对象详解

    面向对象详解1 OO1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  3. c# 后台GET、POST、PUT、DELETE传输发送json数据

    一.Get 方式传输 //url为请求的网址,param参数为需要查询的条件(服务端接收的参数,没有则为null) //返回该次请求的响应 public string HttpGet(string u ...

  4. @media媒体查询

    @media媒体查询 @media screen and (min-width:640px) and (max-width:1920px){/*当屏幕尺寸大于640px时与小于1920时*/ .pub ...

  5. AsyncTask的工作原理

    AsyncTask是Android本身提供的一种轻量级的异步任务类.它可以在线程池中执行后台任务,然后把执行的进度和最终的结果传递给主线程更新UI.实际上,AsyncTask内部是封装了Thread和 ...

  6. leetcode-91-解码方法（动态规划和递归两种解法）

    题目描述: 一条包含字母 A-Z 的消息通过以下方式进行了编码: 'A' -> 1 'B' -> 2 ... 'Z' -> 26 给定一个只包含数字的非空字符串,请计算解码方法的总数 ...

  7. Go语言指针

    指针简介 (Pointer)是编程语言中的一个对象,利用地址,它的值直接指向(points to)存在电脑存储器中另一个地方的值.由于通过地址能找到所需的变量单元,可以说,地址指向该变量单元.因此,将 ...

  8. This operation is not available unless admin mode is enabled: FLUSHDB

    报错:  This operation is not available unless admin mode is enabled: FLUSHDB 参考内容: https://www.cnblogs ...

  9. Mac下使用Wine安装Notepad++

    下载: (链接: https://pan.baidu.com/s/1miOjLXY 密码: 2egg) 安装: 1.安装Wine 参考:http://www.cnblogs.com/EasonJim/ ...

  10. asp.net 网站在Apache下的配置,就这么简单

    asp.net 网站在Apache下的配置,就这么简单 # # Virtual Hosts # # If you want to maintain multiple domains/hostnames ...