百度搜索效果（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. js中new一个对象的过程

    使用new关键字调用函数(new ClassA(-))的具体步骤: 1. 创建空对象{}: 2. 设置新对象的constructor属性为构造函数的名称,设置新对象的__proto__属性指向构造函数 ...

  2. Java基础知识二次学习--第四章 异常

    第四章 异常处理   时间:2017年4月26日11:16:39~2017年4月26日11:28:58 章节:04章_01节 04章_02节 视频长度:20:46+01:16 内容:异常的概念 心得: ...

  3. .net操作压缩文件

    附件:SharpZipLib.zip public class UnZipClass//解压 { /// <summary> /// 解压功能(解压压缩文件到指定目录) /// </ ...

  4. 发布自己第一个npm 组件包（基于Vue的文字跑马灯组件）

    一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...

  5. Swift 入门之简单语法（五）

    面向对象 目标 构造函数 构造函数的基本概念 构造函数的执行顺序 KVC 在构造函数中的使用及原理 便利构造函数 析构函数 区分 重载 和 重写 懒加载 只读属性(计算型属性) 设置模型数据(didS ...

  6. nginx源码分析——线程池

    源码: nginx 1.13.0-release   一.前言      nginx是采用多进程模型,master和worker之间主要通过pipe管道的方式进行通信,多进程的优势就在于各个进程互不影 ...

  7. 六一儿童节PHP宝宝又被围剿了，迅速围观！

    原文链接 据说这是2020年某国际多语言幼儿园的官方讨论会现场外泄图片,程序员宝宝们,你们同意会议结果吗? 据说这是2020年某国际多语言幼儿园的官方讨论会现场外泄图片,程序员宝宝们,你们同意会议结果 ...

  8. js循环给li绑定事件实现 点击li弹出其索引值 和内容

    代码如下: html代码 <ul> <li>房产</li> <li>家居</li> <li>二手房</li> < ...

  9. Vulkan Tutorial 08 交换链

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 在这一章节,我们了解一下将渲染图像提交到屏幕的基本机制.这种机制成为交换链,并且需要 ...

  10. PHP科普

    1.PHP是什么意思? 超文本预处理器(Hypertext Preprocessor) 2.PHP是干什么用的? PHP是一种通用开源脚本语言.语法吸收了C语言.Java和Perl(实际抽取与汇报语言 ...