[html/css/js]搜索建议提示

标签: html css js | 发表时间:2012-07-16 10:52 | 作者:Vision694707363
分享到:
出处:http://blog.csdn.net

效果图:



代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>search advice</title>
<style type="text/css">
	body {
		font-family:"yaHei Consolas Hybrid";
		margin:0;
	}
	ul {
		margin:0;
		list-style:none;
		padding:0;
	}
	/*搜索栏*/
	.search-block {
		width:400px;
		position:relative;
		margin:50px auto;
	}
	.search-block input {
		font-size:20px;
	}
	/*提示标签*/
	.lbl-default {
		position:absolute;
		cursor:text;
		top:15px;
		left:15px;
		color:#ccc;
	}
	/*输入框*/
	.txt-default {
		width:378px;
		height:28px;
		border:1px solid #ddd;
		padding:10px;
	}
	/*按钮*/
	.btn {
		border:0;
		width:100px;
		height:50px;
		background-color:#56bdf3;
		color:#fff;
		text-align:center;
		cursor:pointer;
	}
	/*搜索按钮*/
	.search-button {
		position:absolute;
		left:300px;
		top:0;
	}
	/*搜索建议*/
	.search-advice {
		display:none;
		width:400px;
		position:absolute;
		background-color:#fff;
	}
	/*搜索建议列表*/
	#search-advice-list {
		border-left:1px solid #ddd;
		border-right:1px solid #ddd;
		border-bottom:1px solid #ddd;
	}
	#search-advice-list li{
		display:block;
		width:378px;
		height:30px;
		padding:10px;
	}
	#search-advice-list li:hover {
		background-color:#f5f5f5;
	}
</style>
<script type="text/javascript">
	// 搜索建议模拟数据
	var mockData = ['jsp','json','ajax','java','jquery','java','javascript'];
	// 根据id获取dom元素
	function $(id) {
		return document.getElementById(id);
	}
	// 隐藏dom元素
	function hide(dom) {
		dom.style.display = 'none';
	}
	// 显示dom元素
	function show(dom) {
		dom.style.display = 'block';
	}
	// 将label绑定到input上作为输入提示
	function bindLabelToInput(labelId, inputId) {
		// 获取输入焦点时,隐藏提示标签
		$(inputId).onfocus = function() {
			hide($(labelId));
		};
		// 失去输入焦点时,判断输入框的是否有值,有则显示提示标签
		$(inputId).onblur = function() {
			if (this.value == null || this.value.length < 1) {
				show($(labelId));
			}
		};
	}
	function createDomTo(tagName,arr,parentNode) {
		for (var i=0; i<arr.length; i++) {
			var tag = document.createElement(tagName);
			tag.innerHTML = arr[i];
			parentNode.appendChild(tag);
		}
	}
	// 窗口加载完dom结构时
	window.onload = function() {
		bindLabelToInput('lbl-search','txt-search');
		
		// 搜索建议
		var adviceWords = new Array();
		var ul = $('search-advice-list');	// 建议列表
		$('txt-search').onkeyup = function() {
			if (this.value.length > 0) {
				for (var i=0; i<mockData.length; i++) {
					if (mockData[i].indexOf(this.value) >= 0) {
						adviceWords.push(mockData[i]);
					}
				}
				// 有结果才显示提示框
				if (adviceWords.length > 0) {
					ul.innerHTML = '';
					createDomTo('li',adviceWords,ul);
					show(ul.parentNode);
				}
				adviceWords = new Array();	//	清空建议数据
			} else {
				hide(ul.parentNode);
			}
		};
	};
</script>
</head>

<body>
	<div class="search-block">
    	<label for="txt-search" id="lbl-search" class="lbl-default">请输入要搜索的内容</label>
    	<input type="text" id="txt-search" class="txt-default"/>
        <input type="button" id="submit-button" class="btn search-button" value="搜索"/>
        <div class="search-advice">
			<ul id="search-advice-list">
			</ul>
        </div>
    </div>
</body>
</html>


作者:Vision694707363 发表于2012-7-16 18:52:57 原文链接
阅读:0 评论:0 查看评论

相关 [html css js] 推荐:

在线调试并共享HTML,CSS,JS

- Albert - [米随随] s5s5
如题,以后同人讲代码时可以用到. 2004年04月9日 -- MSN中文专业站 (0). 2006年06月5日 -- 读“疲倦的博客们”有感 (9). 2005年07月20日 -- 基于web2.0的网站创意 (33).

[html/css/js]搜索建议提示

- - CSDN博客推荐文章
// 根据id获取dom元素. // 将label绑定到input上作为输入提示. // 获取输入焦点时,隐藏提示标签. // 失去输入焦点时,判断输入框的是否有值,有则显示提示标签. // 窗口加载完dom结构时. <label for="txt-search" id="lbl-search" class="lbl-default">请输入要搜索的内容</label>.

Ratchet:使用 HTML,JS,CSS 创建 iPhone App 原型

- - 我爱水煮鱼
Ratchet 是一个免费的开源的工具,它主要的功能就是可以使用最简单的 HTML,CSS,JavaScript 这些 Web 技术就能很容易创建 iPhone 应用原型. Ratchet 使用非常简单,只需要简单的几行代码就能创建绝大部分 iOS 的组件,如:Bars, Lists, Buttons, Segmented controllers, Counts, Forms, Toggles, Popovers, Sliders, Push 等等.

收集免费的HTML/CSS/JS UI工具包

- - Jackchen Design 1984
随着HTML5和CSS3以及网页设计布局的全面翻新创新改革. 让很多网页设计者和界面设计师都知道一个道理. 这不仅仅是未来提高工作的效率,还能更好的去处理网页整体视觉效果. 优秀的工具包可以让您的工作事半功倍是肯定. 重要的是可以让流程更加清晰快速的呈现出来. 所以对于很多好的网站(比如Facebook,twitter,YaHOO等)你看第一眼就能知道他们所属的风格指向.

HTML+CSS小结 - jessies

- - 博客园_首页
   结构   HTML        .    样式   CSS      .    行为   JavaScript(交互行为).    <meta name="参数" content="name属性值"/>.    <title>网页标题</title>.

解耦 HTML、CSS和JavaScript

- - ITeye资讯频道
当前在互联网上,任何一个稍微复杂的网站或者应用程序都会包含许多HTML、CSS和JavaScript. 随着互联网运用的发展以及我们对它的依赖性日益增加,设定一个关于组织和维护你的前端代码的计划是绝对需要的. 当今的一些大型互联网公司,由于越来越多的人会接触到日益增加的前端代码,它们会试图去坚持代码的模块化.

HTML 5 & CSS 3的新交互特性

- chacoo - 所有文章 - UCD大社区
本文标题的这副图片,是用Phosotshop制作的. 但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字. 并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新. 那么,有没有一种新的方法可以避免这些缺点呢. 有的,HTML5和CSS3就可以满足你的需求.

优秀的 HTML 和 CSS 代码规范

- - SHTION官方网站
HTML 和 CSS 代码规范究竟是怎么样的. 做网站时, HTML 和 CSS 代码有什么要求. HTML 和 CSS 代码的写法是否影响网站的SEO. 写好  HTML 和 CSS 代码需要注意些什么. 一般大型WEB站点开发设计人员,要求使用者具有一定的 HTML、CSS基础知识,对原代码具有较强的控制能力.

js和css的顺序关系

- - Kejun's Blog
head里的顺序如下,考虑会对请求有何影响:. a,b – head里出现外联js,无论如何放,css文件都不能和body里的请求并行 (图1). c – head里的内联js只要在所有外联css前面,css文件可以和body里的请求并行(图2). d – head里的内联js只要在任一外联css后面,css文件就不能和body里的请求并行(图1).

6种编写HTML和CSS的最有效的方法

- Ling:™ patient() - 博客园新闻频道
  写HTML5和CSS3,以及JavaScript,前端开发者有了大大的用武之地. 大家都在用很多的工具和技术来武装自己,以加快前段的开发.   本文分享了6中最有效的方法,希望能提供你的效率,为你节约时间. Dynamic CSS(动态 CSS).   如果你想加速你的CSS代码编写,那么你需要学习并掌握动态CSS.