jsonp实现下拉搜索
<!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实现下拉搜索的更多相关文章
- vue下拉搜索
vue版本是1.0.21 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- yii2 GridView 下拉搜索实现案例教程
作者:白狼 出处:http://www.manks.top/article/yii2_gridview_dropdown_search本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章 ...
- GridView 下拉搜索
/** * 下拉筛选 * @column string 字段 * @value mix 字段对应的值,不指定则返回字段数组 * @return mix 返回某个值或者数组 */ public stat ...
- angularjs select下拉搜索框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- laravel7 下拉搜索
html:页面 首先给下拉框一个页面改变事件,将下拉框的值发送至后台,进行查询 <select name="interest" id="serarch" ...
- vue的jsonp百度下拉菜单
通过vue的jsonp实现百度下拉菜单的请求,vue的版本是2.9.2 <!DOCTYPE html> <html lang="en"> <head& ...
- select2 下拉搜索 可编辑可搜索 / 只可搜索
官网 (http://select2.github.io/examples.html) <!--引入select2需要的文件--> <script type="text/j ...
- select2 下拉搜索控件
1.添加相应的script链接 jquery: <script type="text/javascript" src="http://cdn.bootcss.com ...
- Yii 1开发日记 -- 后台搜索功能下拉及关联表搜索
Yii 1 实现后台搜索,效果如下: 一. 下拉搜索: 1.模型中和常规的一样 if (isset($_GET['agency']['status']) && $_GET['agenc ...
随机推荐
- 使用WinForm Chart控件 制作饼装,柱状,折线图
http://blog.csdn.net/dream2050csdn/article/details/53510340 chart控件的属性很多,主要用到Chart控件图表区域的属性有五个属性 1.A ...
- python的异步IO模块
asyncio模块:示例一 import asyncio @asyncio.coroutine def func1(): print('before...func1......') yield fro ...
- 编写一个数组工具类, 编写本软件的 帮助文档(API文档)
本文档是对静态成员的练习. 一. 建立一个ArrayTool(数组工具)的类,在此类中对传入数组进行一些操作(选最大值.先最小值.冒泡排正序.选择排反序.输出数组元素), 二. 建立一个Test的类, ...
- Ubuntu的 g++ gcc版本升降级
更改gcc默认版本(gcc版本降级/升级) ### 以降级到gcc-6为例 >* sudo apt install gcc-6 g++-6 >* sudo update-alternati ...
- 用go实现一个redis-cli
转载文章:https://my.oschina.net/liangwt/blog/2231557?origin= 代码样例:https://github.com/liangwt/redis-cli
- Hadoop生态圈-Ranger数据安全管理框架
Hadoop生态圈-Ranger数据安全管理框架 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Ranger简介 Apache Ranger是一款被设计成全面掌握Hadoop生 ...
- rancher2.0部署
1.安装前准备 #当前环境介绍 操作系统:CentOS7.3 硬件:2C 4G内存 官网要求Docker版本: 1.12.6 1.13.1 17.03.2 #关闭防火墙 systemctl stop ...
- python jquery初识
jQuery的介绍 jQuery是一个快速,小巧,功能丰富的JavaScript库.它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作, 事件处理动画和Ajax更加简单.通过多功能 ...
- python 面向对象(三)类与类之间的关系 初始化方法一些类
###################总结################# 面试的时候 让写python一些特殊方法 __init__ 创建对象的时候初始化 __new__对象实例化调用第一个方法 ...
- java读取配置文件信息
ResourceBundle resource = ResourceBundle.getBundle("shopxx");//不要加.properties后缀,我加了报错 reso ...