1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript">
  7.             //curl "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=bbb&cb=
  8.             //curl "https://suggest.taobao.com/sug?code=utf-8&q=aaa&callback=
  9.             window.onload = function(){
  10.                 var oTxt = document.getElementById("txt");
  11.                 var oBtn = document.getElementById("btn");
  12.                 oTxt.onkeyup = function(){
  13.                     var sc = document.createElement("script");
  14.                     //sc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + oTxt.value + "&cb=fn";
  15.                     sc.src = "https://suggest.taobao.com/sug?code=utf-8&q="+oTxt.value + "&callback=fn";
  16.                     document.getElementsByTagName("head")[0].appendChild(sc);
  17.                 }
  18.             }
  19.             //全局函数
  20.             function fn(str){
  21.                 //console.log(str.s);
  22.                 var oUl = document.getElementById("ul1");
  23.                 oUl.innerHTML = "";
  24.                 for(var i = 0; i < str.result.length; i ++){
  25.                     var li = document.createElement("li");
  26.                     li.innerHTML = str.result[i];
  27.                     oUl.appendChild(li);
  28.                 }
  29.             }
  30.         </script>
  31.  
  32.     </head>
  33.     <body>
  34.         <input type="text" name="txt" id="txt" value="" />
  35.         <input type="button" name="btn" id="btn" value="搜索" />
  36.         <ul id="ul1">
  37.  
  38.         </ul>
  39.     </body>
  40. </html>

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

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <input type="text" name="" id="">
  10.     <ul></ul>
  11. </head>
  12. <body>
  13. <script>
  14. var oBtn = document.getElementsByTagName('input')[0];
  15. oBtn.onkeyup = function() {
  16.     var st = document.createElement('script');
  17.     st.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + oBtn.value + "&cb=fnn";
  18.     document.getElementsByTagName('head')[0].appendChild(st);
  19. }
  20. function fnn(str) {
  21.     console.log(str);
  22.     var oUl = document.getElementsByTagName('ul')[0];
  23.     oUl.innerHTML = "";
  24.     for (var i = 0; i < str.s.length; i++) {
  25.         var oLi = document.createElement("li");
  26.         oLi.innerHTML = str.s[i];
  27.         oUl.appendChild(oLi);
  28.     }
  29. }
  30. </script>
  31. </body>
  32. </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. 第一篇 - bsp抓取python中文开发者社区中的所有高级教程

    工具:python3.6  pycharm 库:bs4 + urllib 第一步:读取html源码 from bs4 import BeautifulSoup import urllib.reques ...

  2. 计算机基础：计算机网络-chapter4 网络层

    网络层的使用:如 ping,tracert,原理是ICMP 一.什么叫网络,网络层做什么,通过什么实现,这章的内容, 什么叫网络,实现这些需要做什么 将全世界范围内数以百万计的网络都互连起来,并且能够 ...

  3. 新建工程时报错(26, 13) Failed to resolve: com.android.support:appcompat-v7:28.+ ,

    allprojects { repositories { jcenter() maven { url "https://maven.google.com" } } }

  4. 一键开启MacOS HiDPI

    完整文件下载:一键开启MacOS HiDPI 引言 作为一个黑苹果用户,追求黑果的体验是当然的,当各个硬件都驱动完善后,要做的就是细节的优化了,毕竟装上是拿来用的,可不能因为体验差苦了自己啊.机器毕竟 ...

  5. java将long数据转为int类型的方法

    二.调用intValue()方法 [java] long ll = 300000; int ii= new Long(ll).intValue(); 三.先把long转换成字符串String,然后在转 ...

  6. Nginx+Keeplived双机热备(主从模式)

    Nginx+Keeplived双机热备(主从模式) 参考资料: http://www.cnblogs.com/kevingrace/p/6138185.html 双机高可用一般是通过虚拟IP(漂移IP ...

  7. Storm 消息分发策略

    1.Shuffle Grouping:随机分组,随机派发stream里面的tuple,保证每个bolt接收到的tuple数目相同.2.Fields Grouping:按字段分组,比如按userid来分 ...

  8. saltstack SLS

    SLS文件定义 SLS(代表SaLt State文件)是Salt State系统的核心.SLS描述了系统的目标状态,由格式简单的数据构成.这经常被称作配置管理 top.sls 是配置管理的入口文件,一 ...

  9. 10 个 Linux 中方便的 Bash 别名

    10 个方便的 Bash 别名 1. 你有几次遇到需要解压 .tar 文件但无法记住所需的确切参数?别名可以帮助你!只需将以下内容添加到 .bash_profile 中,然后使用 untar File ...

  10. redis注册成window服务 标签： redis

    注册服务 redis-server.exe –service-install redis.windows.conf 删除服务 redis-server –service-uninstall 开启服务 ...