百度搜索效果（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. cgroup原理简析:vfs文件系统

    要了解cgroup实现原理,必须先了解下vfs(虚拟文件系统).因为cgroup通过vfs向用户层提供接口,用户层通过挂载,创建目录,读写文件的方式与cgroup交互.因为是介绍cgroup的文章,因 ...

  2. RabbitMQ学习2---使用场景

    RabbitMQ主页:https://www.rabbitmq.com/ AMQP AMQP协议是一个高级抽象层消息通信协议,RabbitMQ是AMQP协议的实现.它主要包括以下组件: 1.Serve ...

  3. eclipse C 开发 Stm32

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.下载eclipse需要的运行环境,JDK/JRE. 在http://wiki.eclipse.org/Eclipse/Installation ...

  4. <<、>>、>>>移位操作

    <<,有符号左移位,将运算数的二进制整体左移指定位数,低位用0补齐. int leftShift = 10; System.out.println("十进制:" + l ...

  5. 【JAVAWEB学习笔记】21_多条件查询、attr和prop的区别和分页的实现

    今天主要学习了数据库的多条件查询.attr和prop的区别和分页的实现 一.实现多条件查询 public List<Product> findProductListByCondition( ...

  6. My-Blog搭建过程：如何让一个网站从零到可以上线访问

    文章简述 5月13号的时候,上线了自己的个人博客网站:http://blog.hanshuai.xin,随后在平台上发布了一篇关于My-Blog的介绍博客<Docker+SpringBoot+M ...

  7. java集合（2）- java中HashMap详解

    java中HashMap详解 基于哈希表的 Map 接口的实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了非同步和允许使用 null 之外,HashMap 类与 H ...

  8. nodeJS之进程process对象

    前面的话 process对象是一个全局对象,在任何地方都能访问到它,通过这个对象提供的属性和方法,使我们可以对当前运行的程序的进程进行访问和控制.本文将详细介绍process对象 概述 process ...

  9. Win95+IE3 – Win10+IE11全版本执行漏洞（含POC）

    微软本月安全更新修复了一个潜藏了18年的IE远程代码执行漏洞(CVE-2014-6332),可以说是给windows吃了一颗大补丸.缺陷出现在VBScript的代码中,自Windows 95首次发布( ...

  10. Eclipse导入项目常见问题----乱码问题03

    有时打开导入的项目文件时,会出现如下图情况: 解决方法 如下图步骤所示: 此时,我们可以看到文件正常了 jdk版本问题(有个红色感叹号)01:http://blog.csdn.net/baidu_37 ...