<!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. 做IT项目管理也需要具备产品思维

    不知道大家有没有听过大胡子姜志辉老师的公开课,我自己认为讲的还是不错的. 因为本身大胡子老师就是一个IT行业的人士,自己还经历了程序员.架构师.项目经理.敏捷教练.产品经理.公司持有人等多个角色.所以 ...

  2. Mock2 moco框架的http协议get方法Mock的实现

    首先在Chapter7文件夹下再新建一个startGet.json startget.json代码如下,因为是get请求,所以要写method关键字,有两个,一个是有参数,一个是无参数的请求. [ { ...

  3. Proxy代理模式

    https://www.cnblogs.com/vincentzh/p/5988145.html https://www.cnblogs.com/wrbxdj/p/5267370.html(不错)

  4. ElasticSearch6.5.0【Java客户端之TransportClient】

    说明 TransportClient:网上流传最多的客户端,目前最新版本 Java REST Client:官方推荐的客户端, 官方:我们要在Elasticsearch 7.0的版本中不赞成使用Tra ...

  5. poj 3273"Monthly Expense"(二分搜索+最小化最大值)

    传送门 https://www.cnblogs.com/violet-acmer/p/9793209.html 题意: 有 N 天,第 i 天会有 a[ i ] 的花费: 将这 N 天分成 M 份,每 ...

  6. python学习笔记：python异常的调用原理

    因为错误是class,捕获一个错误就是捕获到该class的一个实例.因此,错误并不是凭空产生的,而是有意创建并抛出的.Python的内置函数会抛出很多类型的错误,我们自己编写的函数也可以抛出错误. h ...

  7. Gym 101915

    Gym - 101915A  Printing Books 题意:有一本书,从第X页开始,一共用了n位数字,求此书一共多少页.99就是两位数字,100就是三位数字. 思路:直接模拟即可,我用了一个hi ...

  8. Transactional 事务

    1.事务场景中,抛出异常被catch后,如果需要回滚,一定要手动回滚 其实像第一种try catch这种把整个包裹起来,这种业务方法也就等于脱离了spring事务的管理,因为没有任何异常会从业务方法中 ...

  9. 深入理解之css中的border属性

    1. border-width:不支持不百分比 1)受本身的使用场景决定. 例子:左边为手机,右边为显示器,但是他们边框的宽度是差不多的,不会因为设备大就让边框宽度变大. 2. border-widt ...

  10. Python递归_打印节点信息

    Python递归_打印节点信息 递归特性:1.必须由一个明确的结束条件2.每次进入更深一层递归时,问题规模相比上一次递归都应该有所减少3.递归效率不高,递归层次过多会导致栈溢出(在计算机中,函数调用时 ...