<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript">

            //curl "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=bbb&cb=

            //curl "https://suggest.taobao.com/sug?code=utf-8&q=aaa&callback=

            window.onload = function(){

                var oTxt = document.getElementById("txt");

                var oBtn = document.getElementById("btn");

                oTxt.onkeyup = function(){

                    var sc = document.createElement("script");

                    //sc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + oTxt.value + "&cb=fn";

                    sc.src = "https://suggest.taobao.com/sug?code=utf-8&q="+oTxt.value + "&callback=fn";

                    document.getElementsByTagName("head")[0].appendChild(sc);

                }

            }

            //全局函数

            function fn(str){

                //console.log(str.s);

                var oUl = document.getElementById("ul1");

                oUl.innerHTML = "";

                for(var i = 0; i < str.result.length; i ++){

                    var li = document.createElement("li");

                    li.innerHTML = str.result[i];

                    oUl.appendChild(li);

                }

            }

        </script>

    </head>

    <body>

        <input type="text" name="txt" id="txt" value="" />

        <input type="button" name="btn" id="btn" value="搜索" />

        <ul id="ul1">

        </ul>

    </body>

</html>

（本例调用淘宝搜索接口）效果如下

引用的搜索接口不一样，则所需要的内容在str中的位置不一样，故截取名称不同。如下，调用百度搜索接口

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <input type="text" name="" id="">

    <ul></ul>

</head>

<body>

<script>

var oBtn = document.getElementsByTagName('input')[0];

oBtn.onkeyup = function() {

    var st = document.createElement('script');

    st.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + oBtn.value + "&cb=fnn";

    document.getElementsByTagName('head')[0].appendChild(st);

}

function fnn(str) {

    console.log(str);

    var oUl = document.getElementsByTagName('ul')[0];

    oUl.innerHTML = "";

    for (var i = 0; i < str.s.length; i++) {

        var oLi = document.createElement("li");

        oLi.innerHTML = str.s[i];

        oUl.appendChild(oLi);

    }

}

</script>

</body>

</html>

效果如下

jsonp实现下拉搜索的更多相关文章

  1. vue下拉搜索

    vue版本是1.0.21 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  2. yii2 GridView 下拉搜索实现案例教程

    作者:白狼 出处:http://www.manks.top/article/yii2_gridview_dropdown_search本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章 ...

  3. GridView 下拉搜索

    /** * 下拉筛选 * @column string 字段 * @value mix 字段对应的值,不指定则返回字段数组 * @return mix 返回某个值或者数组 */ public stat ...

  4. angularjs select下拉搜索框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. laravel7 下拉搜索

    html:页面 首先给下拉框一个页面改变事件,将下拉框的值发送至后台,进行查询 <select name="interest" id="serarch" ...

  6. vue的jsonp百度下拉菜单

    通过vue的jsonp实现百度下拉菜单的请求,vue的版本是2.9.2 <!DOCTYPE html> <html lang="en"> <head& ...

  7. select2 下拉搜索 可编辑可搜索 / 只可搜索

    官网 (http://select2.github.io/examples.html) <!--引入select2需要的文件--> <script type="text/j ...

  8. select2 下拉搜索控件

    1.添加相应的script链接 jquery: <script type="text/javascript" src="http://cdn.bootcss.com ...

  9. Yii 1开发日记 -- 后台搜索功能下拉及关联表搜索

    Yii 1 实现后台搜索,效果如下: 一. 下拉搜索: 1.模型中和常规的一样 if (isset($_GET['agency']['status']) && $_GET['agenc ...

随机推荐

  1. NCBI通过氨基酸位置查看相邻SNP

    进入NCBI网站 在SNP的搜索框中输入SNP位点,比如“rs52811957” 在弹出的对话框中选择“Gene View” 进入以后会显示该变异相邻SNP.原始氨基酸.变异后的氨基酸.positio ...

  2. Day28--Python--网络通信协议 tcp与udp下的socket

    昨日内容回顾: 1. CS架构 服务端客户端架构 软件CS架构: 京东,淘宝,QQ,微信,暴风影音,快播 硬件CS架构: 打印机 服务端: 提供服务的 客户端: 享受服务的 BS架构: 浏览器和服务端 ...

  3. tomcat部署-手动启动tomcat部署，添加网页，

    公司的内网什么都不能往外传,于是自己用公司的网络搭了一个网页,在网上抄了一堆upload,用来来回传输数据.... 但是每次用ideaJ启动服务器太费时. 研究了一下怎么手动启动tomcat,部署网页 ...

  4. (贪心 线段不相交问题)codeVs 1214 线段覆盖

    题目描述 Description 给定x轴上的N(0<N<100)条线段,每个线段由它的二个端点a_I和b_I确定,I=1,2,……N.这些坐标都是区间(-999,999)的整数.有些线段 ...

  5. Mac影音多媒体工具软件推荐

    今天和大家分享软件专题:「影音多媒体工具」,今天的「影音多媒体工具」主要包含音乐播放.音频编辑.视频播放.视频编辑.截图录像等类别的软件. 有需要其他类型的软件,可在评论区留言或私信于我[磨人的小妖精 ...

  6. python 线程(创建2种方式,锁,死锁,递归锁,GIL锁,守护进程)

    ###############总结############ 线程创建的2种方式(重点) 进程:资源分配单位    线程:cpu执行单位(实体) 线程的创建和销毁的开销特别小 线程之间资源共享,是同一个 ...

  7. python 计算机发展史,线程Process使用 for循环创建 2种传参方式 jion方法 __main__的解释

    ########################总结################## #一 操作系统的作用: 1:隐藏丑陋复杂的硬件接口,提供良好的抽象接口 2:管理.调度进程,并且将多个进程对硬 ...

  8. 解决 Ubuntu 经常 卡死

    ubuntu 的卡死可能与显卡驱动不兼容有关. 这里提供2种方式, 1.禁用原来自带的nouveau显卡驱动sudo gedit /etc/modprobe.d/blacklist.conf在最后一行 ...

  9. Web项目发布的一些设置

    比如我们有个项目想要发布到互联网上,我们首先需要购买域名以及主机,主机的话,推荐云主机(本人推荐西部数码或者阿里云),性能好: 我们先在云主机上搭建环境,比如Mysql,Jdk,Tomcat: 然后我 ...

  10. 高性能的代理服务-Envoy

    Envoy最初建于Lyft,是一个高性能的代理服务,为服务网格提供了基础. 它与应用程序并行运行,通过以平台无关的方式提供通用功能来抽象网络. 当基础架构中的所有服务流量都通过Envoy网格时,通过一 ...