<!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. 团体程序设计天梯赛-练习集-L1-029. 是不是太胖了

    L1-029. 是不是太胖了 据说一个人的标准体重应该是其身高(单位:厘米)减去100.再乘以0.9所得到的公斤数.已知市斤是公斤的两倍.现给定某人身高,请你计算其标准体重应该是多少?(顺便也悄悄给自 ...

  2. codeforces 468B two set(并查集)

    链接 B. Two Sets 题意 给两个集合A B,两个数a b,n个数x,分配n个数到两个集合,要求x , a-x在同一个集合,x , b-x在同一个集合,属于A集合的数输出0,B的输出1,无解输 ...

  3. 采用requests库构建简单的网络爬虫

    Date: 2019-06-09 Author: Sun 我们分析格言网 https://www.geyanw.com/, 通过requests网络库和bs4解析库进行爬取此网站内容. ​ 项目操作步 ...

  4. Period UVA - 1328_结论题

    Code: #include<cstdio> #include<cstring> using namespace std; const int maxn=1000000+5; ...

  5. CSS - display:inline-block 相邻元素间有4px的空白间距

    取消“display:inline-block 相邻元素间有4px的空白间距” Demo:http://jsfiddle.net/JSDavi/p6gcx6nx/ 例子: <div sytle= ...

  6. javaScript原型、闭包和异步操作

    同学们,这篇博客有点水了,并不是说我不想写这块的内容,是因为查了很多资料,看了很多帖子之后,发现园内王福朋老师写的这系列文章真的很好,他的这系列的博客我已经看了3.4遍了,每一次都有新的收获,我可写不 ...

  7. Git clone时出现Please make sure you have the correct access rights and the repository exists.问题已解决。

    看了好多资料终于搞定了git 中clone命令报错这个问题,废话不多说直接上步骤希望对大家有帮助. 1   删除.ssh文件夹(直接搜索该文件夹)下的known_hosts(手动删除即可,不需要git ...

  8. Profile 动态切换环境

    一.多 Profile 文件我们在主配置文件编写的时候,文件名可以是 application-{profile}.properties/yml默认使用 application.properties 的 ...

  9. jQuery(表单选择器)

  10. RobotFrameWork+APPIUM实现对安卓APK的自动化测试----第四篇【AppiumLibrary实用函数介绍】

    http://blog.csdn.net/deadgrape/article/details/50585677 通过前几篇的讲述,我相信大家已经对RF+Appium的框架已经有所了解了. 接下来我告诉 ...