<!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. fcntl F_GETFL

    F_GETFL 我的理解是file get flag #include <stdio.h>#include <fcntl.h>#include <unistd.h> ...

  2. ON DUPLICATE KEY UPDATE单个增加更新及批量增加更新的sql

    转: ON DUPLICATE KEY UPDATE单个增加更新及批量增加更新的sql 本文为博主原创,转载请注明出处. 在实际应用中,经常碰到导入数据的功能,当导入的数据不存在时则进行添加,有修改时 ...

  3. pytest 5. fixture之yield实现teardown

    前言: 1.前面讲的是在用例前加前置条件,相当于setup,既然有setup那就有teardown,fixture里面的teardown用yield来唤醒teardown的执行 看以下的代码: #!/ ...

  4. unittest的使用一

    selenium: (1).firefox官方下载驱动geckodriver,windows:放在\python36或者是27的目录下 Mac: /usr/local/bin (2).firefox的 ...

  5. java linux sdk1.8

    wget --no-check-certificate --no-cookies --header "Cookie: oraclelicense=accept-securebackup-co ...

  6. (DIjsktra算法) nyoj1401-一场说走就走的旅行

    题目描述: 有一天,孩子回来对我说:“妈妈,听说马尔代夫很不错,放假了我想去玩.”马尔代夫?我也想去!没有人不向往一场说走就走的旅行!“其实我想去的地方很多,呼伦贝尔大草原.玉龙雪山.布达拉宫.艾菲尔 ...

  7. go的net/http用法

    http包提供了HTTP客户端和服务端的实现 一:http客户端的几种方法 1. func (c *Client) Get(url string) (resp *Response, err error ...

  8. 字符缓冲流BufferedWriter BufferedReader

    //字符缓冲流主要用于文本数据的高速写入 package cn.lijun.demo1; import java.io.BufferedReader; import java.io.FileNotFo ...

  9. 信用评分卡 (part 7 of 7)

    python信用评分卡(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_camp ...

  10. ThinkPHP3.2中字段unique验证出错的解决方法

    protected $_validate=array( array('stu_id','','学号已存在',1,'unique',1), ) 当一次插入多条数据时: 在进行循环 使用create验证时 ...