百度搜索效果（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. App架构经验总结（转载）

    原文地址:http://www.iteye.com/news/31472 架构因人而异,不同的架构师大多会有不同的看法:架构也因项目而异,不同的项目需求不同,相应的架构也会不同.然而,有些东西还是通用 ...

  2. Java IO和NIO文章目录

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

  3. Springboot基础篇

    Springboot可以说是当前最火的java框架了,非常适合于"微服务"思路的开发,大幅缩短软件开发周期. 概念 过去Spring充满了配置bean的xml文件,随着spring ...

  4. 重新绑定ItemsSource先设置ItemsSource = null;的原因

    即报错信息为:在使用 ItemsSource 之前,项集合必须为空.   原因:Items和ItemSource,只能有一个生效,想用其中一个,另一个必须是空.   重新绑定ItemSource,虽然 ...

  5. Maven学习（三）

    maven相关概念 maven坐标 Maven世界拥有大量构建,当我们需要引用依赖包是,需要用一个用来唯一标识去确定唯一的一个构建.如果拥有了统一规范,就可以把查找工作交给机器. 类似于空间找点的坐标 ...

  6. 多线程之Parallel类

    Parallel类是对线程的一个抽象.该类位于System.Threading.Tasks名称空间中,提供了数据和任务并行性. Paraller类定义了数据并行地For和ForEach的静态方法,以及 ...

  7. HDFS运行原理

    HDFS(Hadoop Distributed File System )Hadoop分布式文件系统.是根据google发表的论文翻版的.论文为GFS(Google File System)Googl ...

  8. Your data vis “Spidey-sense” & the need for a robust “utility belt”

    @theboysmithy did a great piece on coming up with an alternate view for a timeline for an FT piece. ...

  9. centos 修改主机映射

    [root@m1 ~]# vi /etc/hosts

  10. 简单VR照片 使用陀螺仪、姿态角（Roll、Pitch、Yaw ）、四元数

        最近在做一个类似VR照片的demo,跟全景图片也很像,只是VR照片与全景720度显示,我只做了180度.但我发现他们实现的原理有一丝相似,希望可以给一些想入行AR.VR的朋友一些提示吧.   ...