智能搜索工具的优化与应用-优快云博客

本文链接：https://blog.youkuaiyun.com/ruizhengyun/article/details/45060413
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>搜索</title>
	<style type="text/css">
	*{ padding:0; margin:0;}
	body{ font-size:12px;}
	ul,li { list-style:none; cursor:pointer;}
	.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	.clearfix { clear:both; display:block; overflow:hidden; }
	.clear{ clear:both;}
	.left { float:left;}
	.right { float:right;}
	.box{ width:500px; margin:100px; border:1px solid #CCC; padding:10px;}
	.s_box { margin-left:20px;}
	.s_sort ul { overflow:hidden;_zoom:1;}
	.s_sort li{ float:left; margin-right:15px; padding:2px 3px;}
	.s_sort li.act { color:#fff; background:#c00;}
	.s_input { margin-top:10px;}
	.s_input input { width:300px; height:25px; line-height:25px; border:1px solid #dbdbdb;}
	.s_btn { margin-top:26px;}
	.s_btn input { padding:5px; font-size:14px;}
	</style>
</head>
<body>
	<div class="title">
		<ul><li></li></ul>
		<dl></dl>
	</div>
	<div class="box clearfix">
		<div class="s_sel left">
			<select id="s_sel"></select>
		</div>
		<div class="s_box left">
			<div class="s_sort">
				<ul id="s_sort">
					<li class="act">网页</li>
					<li>图片</li>
					<li>音乐</li>
					<li>新闻</li>
				</ul>
			</div>
			<div class="s_input">
				<input type="text" id="s_input" />
			</div>
		</div>
		<div class="s_btn right">
			<input type="submit" value="" id="s_btn" />
		</div>
	</div>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script>
		$().ready(function(){
			var aType = ['网页','图片','音乐','新闻'];
			var aItem =['baidu|google|sogou',
						'google|sogou',
						'baidu|google',
						'baidu|sogou'];
			var aUrl = ["http://www.baidu.com/s?wd=|http://www.google.com.hk/search?q=|http://www.sogou.com/web?query=",
					"http://images.google.com.hk/search?tbm=isch&q=|http://pic.sogou.com/pics?query=",
					"http://music.baidu.com/search?key=|http://mp3.sogou.com/music.so?ie=utf8&query=",
					"http://news.baidu.com/ns?tn=news&ie=utf-8&word=|http://news.google.com.hk/news/search?hl=zh-CN&q="];
			var sel = $('#s_sel');
			// 索引（类型索引、列表索引）
			var iType = 0;
			var iSel = 0;
			$('#s_sort li').each(function(i){
				$(this).bind('click',function(){
					$(this).addClass('act').siblings().removeClass('act');
					fnLoadSel(i);
					iType = $(this).index();
					iSel = 0;
					fnSetBtnTxt();
				});
			});
			// 列表动态加载
			var fnLoadSel = function(i){
				// 字符串连接
				var selCont = '';
				var selContData = aItem[i].split('|');
				for(var j=0;j<selContData.length;j++){
					selCont +='<option value=' + j + '>' +  selContData[j] + '<\/option>';
				}
				sel.html('').html(selCont);
			}
			// 列表改变事件
			var fnChangeSel = function(){
				sel.bind('change',function(){
					iSel = $(this).val();
					fnSetBtnTxt();
				});
			}
			// 按钮文字改变
			var fnSetBtnTxt = function(){
				$('#s_btn').val(aItem[iType].split('|')[iSel] + '搜索');
			}
			var fnSetAct = function(){
				var url = aUrl[iType].split('|')[iSel] + $('#s_input').val();
				window.open(url);
			}
			fnLoadSel(iType);
			fnSetBtnTxt();
			fnChangeSel();
			$('#s_btn').bind('click',fnSetAct);
		});
	</script>
</body>
</html>
分类搜索
