身思乐,人事爱,稳恒不言败!

模仿百度的下拉搜索,上下键控制并赋值

这两天做开发,接了个任务,就是和百度搜索输入信息回传数据列表一样可以用上下键控制,

这里分享下我的精简版的例子(本来有ajax回传的代码,这里就不讲了,需要注意的是因为我的ajax时间是由keyup事件触发的,有上下键控制的时候会触发ajax,所以需要在keyup事件函数里面屏蔽掉上下键)。

首先是jQuery代码:

<script type="text/JavaScript">
	function moveSelect(step) {
		var listItems = $('#search_show li');
		//当前hover的步数
		var active;
		active = $('.one').index();
		listItems.eq(active).removeClass("one");
		listItems.eq(active).css("color", "#a8a8a8");
		active += step;
		if (active < 0) {
			active = listItems.size() - 1;
		} else if (active >= listItems.size()) {
			active = 0;
		}
		var activeItem = listItems.eq(active).addClass("one");
		listItems.eq(active).css("color", "#fff");
		$("#search_text").val(listItems.eq(active).text());
	};
	$(function() {
		$("#search_text").keydown(function(event) {
			var keycode = (event.keyCode ? event.keyCode: event.which);
			if (keycode == 38) { //up
				moveSelect( - 1);
			} else if (event.keyCode == 40) { //down
				moveSelect(1);
			}
		});
		$("#search_text").focus(function() {
			$("#search_show").css("display", "block");
		});
		$("#search_text").blur(function() {
			$("#search_show").css("display", "none");
		});
		$("#search_show li").hover(function() {
			$(this).addClass("one");
			$(this).siblings().removeClass("one");
			$(this).siblings().css("color", "#a8a8a8");
		});
	});
</script>

moveSelect这个函数参考了网上有人提供的例子,并结合自己的实际需求作了修改。
css样式:

<style type="text/css">
	.one{ background-color: #ff5a00; color:#fff; } ul li{ list-style-type:none;
	color:#a8a8a8; }
</style>

html代码:

<div class="search">
	<div style="padding-left:40px;">
		<input id="search_text" class="search_text" type="text" />
	</div>
	<!--搜索弹出框 start-->
	<div id="search_show" style="width:212px;display:none;">
		<ul style="margin-left:0px;">
			<li>
				请选择搜索范围
			</li>
			<li>
				包含xXx的广播
			</li>
			<li>
				包含xXx的人
			</li>
			<li>
				包含xXx的社团
			</li>
			<li>
				请选择搜索
			</li>
			<li>
				包含xXx的广
			</li>
			<li>
				包含xXx的人们
			</li>
			<li>
				包含xXx的
			</li>
		</ul>
	</div>
	<!--搜索弹出框 end-->
</div>