百度搜索效果（jsonp法）：

不需要放在服务器中，本地就可以执行

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>jsonp法</title>

		<style type="text/css">

			* {

				margin: 0;

				padding: 0;

				list-style: none;

			}

			#box {

				width: 500px;

				margin: 50px auto 0;

			}

			#ipt {

				width: 480px;

				height: 30px;

				padding: 0 8px;

				line-height: 30px;

				font-size: 18px;

			}

			#list {

				padding: 0 10px;

				background: #e3e3e3;

			}

			#list li {

				line-height: 26px;

				font-size: 16px;

				color: blue;

			}

			#list li:hover {

				background: #ccc;

			}

		</style>

	</head>

	<body>

		<div id="box">

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

			<ul id="list">

				<!--<li>12306</li>

				<li>hao123</li>-->

			</ul>

		</div>

		<script src="ajax.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			var ipt = document.getElementById('ipt');

			var list = document.getElementById('list');

			var Script = null;

			ipt.onkeyup = function() {

				if(Script) {//如果存在先移除

					document.body.removeChild(Script);

				}

				Script = document.createElement('script');

				Script.src = 'http://suggestion.baidu.com/su?wd=' + ipt.value+'&cb=mycallback&_='+new Date().getTime();

				document.body.appendChild(Script);

			}

			function mycallback(json) {

				list.innerHTML = '';

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

					list.innerHTML += '<li>'+json.s[i]+'</li>'

				}

			}

		</script>

	</body>

</html>

　　

百度搜索效果（jsonp法）的更多相关文章

  1. 利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）

    实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 <!DOCTYPE html> <html xmlns="http://www.w3 ...

  2. js借助JSONP实现百度搜索框提示效果

    主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题,代码如下(代码中部分使用ES6语法): HTML <input type="text" id ...

  3. jsonp跨越请求百度搜索api 实现下拉列表提示

    题目来源: 最近在做百度IFE前端技术学院的题,然后有一题就是模拟百度搜索智能提示.题目是开源的,稍后给出地址. 因为博主没学过后端啊,欲哭无泪,所以不能实现后端模糊搜索,那如果前端ajax纯粹请求一 ...

  4. jsonp跨域获取数据实现百度搜索

    本菜鸡最近在写某个页面请求数据时,报了如下的错误. Failed to load https://...:No 'Access-Control-Allow-Origin' header is pres ...

  5. jsonp模拟获取百度搜索相关词汇

    随便写了个jsonp模拟百度搜索相关词汇的小demo,帮助新手理解jsonp的用法. <!DOCTYPE html><html lang="en">< ...

  6. Ajax跨域实现淘宝/百度搜索下拉提示效果

    最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:

  7. 跨域解决方案之JSONP，通过借助调用百度搜索的API了解跨域案例

    跨域解决方案之JSONP 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web ...

  8. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  9. Vue调用百度接口做百度搜索

    这两天由于学习需要,需要用vue来调用api接口,但是以前没怎么接触过用vue来调用接口,不会没关系,发挥我们强大的学习能力,都不是事,学习了半天基本也就可以初级上手了,写篇随笔记录下来,方便以后回顾 ...

随机推荐

  1. CentOS6.5_x86安装Mysql5.5.49

    1.说明: 安装MySQL主要有两种方法:一种是通过源码自行编译安装,这种适合高级用户定制MySQL的特性,这里不做说明:另一种是通过编译过的二进制文件进行安装.二进制文件安装的方法又分为两种:一种是 ...

  2. Java IO和NIO文章目录

    1.java IO详尽解析 2.深入分析 Java I/O 的工作机制 3.InputStream类详解 4.OutputStream类详解 5.JAVA的节点流和处理流 6.FileInputStr ...

  3. nodeJS中的包

    前面的话 Node组织了自身的核心模块,也使得第三方文件模块可以有序地编写和使用.但是在第三方模块中,模块与模块之间仍然是散列在各地的,相互之间不能直接引用.而在模块之外,包和NPM则是将模块联系起来 ...

  4. 局域网内部署 Docker Registry

    在局域网内部署 Docker Registry 可以极大的提升平时 pull.push 镜像的速度,从而缩短自动化操作的过程.同时也可以缓解带宽不足的问题,真是一举多得.本文将从创建单机的 Docke ...

  5. c++ 自动应用类型转换

    c++中,在赋值时如果类型不匹配,就会应用到:类型转换.类型转换又分为隐式转换(implicit conversion) 和 显式强制类型转换(emplcit conversion).在这我围绕着类的 ...

  6. python serialread

    代码易读,不再做注释 import serial,os port = os.popen('ls /dev/ttyACM*').read()[:-1] baud = 9600 ser = serial. ...

  7. Interactive pivot tables with R（转）

    I love interactive pivot tables. That is the number one reason why I keep using spreadsheet software ...

  8. awk之随机函数rand()和srand() （转）

    转自:http://blog.chinaunix.net/uid-10540984-id-2942041.html 文件: 1234567 abcdefg ......   现在想要随机抽取5列组成下 ...

  9. spring annotation功能备注

      @Autowired @Autowired 注释可以在 setter 方法中被用于自动连接 bean.以type方式进行匹配. 一个构造函数 @Autowired 说明当创建 bean 时,即使在 ...

  10. 使用wamp扩展php时出现服务未启动的解决方法

    今天在使用wamp扩展php的插件时,出现了如下图所示的错误提示 网上查了查,都说是端口原因,修改Apache的 80端口,但是并没有解决问题. 最后我终于找到了解决方法,步骤很简单,如下: 首先,在 ...