<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{margin: 0px;padding: 0px;}
	#sch{width:200px;margin: 50px auto;}
	#tex{width: 200px;height: 20px;}
	ul{border: 1px solid #eee;width: 202px;display: none;}
	ul li{list-style: none;border: 1px solid #ddd;width:200px;height: 20px;text-align: left;line-height: 20px;}
	ul li:hover{background: orange;}
	</style>
</head>
<body>
	<div id = 'sch'>
		<input type="text" placeholder='请输入关键字' id = 'tex'>
		<ul>
			<!-- <li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li> -->
		</ul>
	</div>
</body>
<script>
	var oTex = document.getElementById('tex');
	var oUl = document.getElementsByTagName('ul')[0];
	function baiduSU(data){
		var d = data.s
		if(d.length){
			oUl.style.display = 'block';
			var str = '';
			for(var i =0;i<d.length;i++)
		{
			str += '<li>'+d[i]+'</li>'
		}
		oUl.innerHTML = str;
		}else{
			oUl.style.display = 'none';
		}
	}

	oTex.onkeyup = function()
	{
		if(oTex.value != '')
		{
			var oScript = document.createElement('script');
			oScript.src = 'http://unionsug.baidu.com/su?wd='+oTex.value+'&cb=baiduSU';
			document.body.appendChild(oScript);
		}else{
			oUl.style.display = 'none';
		}
	}
</script>
</html>来自：http://www.qdfuns.com/notes/36030/ab200b9276e550e91c7fedb9801dfd6f.html

　　

jsonp模仿了得一个百度搜索框的更多相关文章

  1. 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框

    使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

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

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

  3. Ajax以及类似百度搜索框的demo

    public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...

  4. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

  5. React实现最完整的百度搜索框

    import React,{Component} from 'react' import ReactDOM,{render} from 'react-dom' import 'bootstrap/di ...

  6. window系统谷歌浏览器百度搜索框光标不能输入并且不显示光标----自制bug以及解决

    --------------------bug无处不在------------------------- 今天在搞代码的时候,保存文件无意中犯了个致命错误,文件名称写入非法字符,可能与Windows系 ...

  7. JS---DOM---案例：模拟百度搜索框

    模拟百度搜索框 我的思路整理: 1. 注册文本框抬起事件(onkeyup) 2. 处理函数: --->创建临时数组,循环遍历文本框键入的文字内容和keywords数组,用keyWords[i]. ...

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

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

  9. 【JavaScript_DOM 百度搜索框】

    今天给大家带来的事一个简单的百度的历史搜索框,大家在搜索东西的时候,百度会自动给你显示你最近搜索过的一些东西,那这个拿js怎么做呢? 我们一起来学习吧 这是一个HTML页面: <!DOCTYPE ...

随机推荐

  1. ubuntu 搭建Mercurial 服务(nginx)

    ubuntu 搭建Mercurial 服务(nginx) 环境:ubuntu 12.05  Mercurial 步骤: (1)安装nginx 和 Mercurial: sudo apt-get ins ...

  2. openlayers5学习笔记-map事件(moveend)

    //事件:地图移动结束 tmp.map.on('moveend', function (evt) { console.log(evt.frameState.extent); }); evt.frame ...

  3. bzoj 1293: [SCOI2009]生日礼物 问题转化 + 性质分析 + 滚动数组优化

    Description 小西有一条很长的彩带,彩带上挂着各式各样的彩珠.已知彩珠有N个,分为K种.简单的说,可以将彩带考虑为x轴,每一个彩珠有一个对应的坐标(即位置).某些坐标上可以没有彩珠,但多个彩 ...

  4. TensorFlow技术解析与实战学习笔记（13）------Mnist识别和卷积神经网络AlexNet

    一.AlexNet:共8层:5个卷积层(卷积+池化).3个全连接层,输出到softmax层,产生分类. 论文中lrn层推荐的参数:depth_radius = 4,bias = 1.0 , alpha ...

  5. 网络教程(12) TCP协议

    IP协议的限制 IP协议需要 datalink帧来包装它 Ethernet或者PPP 一般都有1500byte字节或者大小的限制 可能会出现的问题 Packet loss – retransmit R ...

  6. .net 导入Excel

    今天我在做导入Excel的时候遇到了一些问题,顺便说句其实我很少做这方面的!我的需求是导入EXCEL 验证数据正确性 并把数据显示到页面 如有错误信息则弹出来 那具体问题是什么呢? 导入Excel有2 ...

  7. jenkins 打包 springboot

    遇到的坑 jdk maven  可以自己配置 也可以让jenkins生成 jenkins创建的项目打的包在  /var/lib/jenkins/jobs/ 需要手动去下载pom中的jar  吧pom复 ...

  8. fun(int **p)的使用

    #include <iostream>using namespace std;void fun(int **p){ cout << p[0][0] << endl; ...

  9. 手机QQ架构的浅谈

    手机QQ的原本的产品定位定位于移动社交,并将娱乐与生活服务相结合,整体的架构模块QQ主要分为登录注册,消息,聊天,联系人,动态,侧边栏,设置等几大模块.其中消息模块和聊天模块是核心模块.好友动态及联系 ...

  10. 在本地生成ssh-key 免密码远程clone GitLab中的项目到本地

    每次项目push.pull都需要输入账号和密码,很烦,方便免密pull与push代码,在本地需要用git bash 创建一个公钥,然后在gitlab中把公钥保存下来. 步骤如下: 1.打开 git b ...