js/jQuery实现类似百度搜索功能
2015-06-17 17:59
916 查看
一、页面代码:
二、js代码:
三、运行效果:
1.在输入框输入关键字:
js/jQuery实现类似百度搜索功能
2.键盘上下键选中:
js/jQuery实现类似百度搜索功能
3.enter键输入:
js/jQuery实现类似百度搜索功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>js/jQuery实现类似百度搜索功能</title> <meta name="Author" content="Michael"> <meta name="Keywords" content="js/jQuery实现类似百度搜索功能"> <meta name="Description" content="js/jQuery实现类似百度搜索功能,可用键盘控制"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <style type="text/css"> #container{ position:absolute; left:50%; top: 40%; } #content{ float:left; position:relative; right:50%; } input{ border:0; width:288px; height:30px; font-size:16px; padding:0 5px; line-height:30px; } .item{ padding:3px 5px; cursor:pointer; } .addbg{ background:#87A900; } .first{ border:solid #87A900 2px; width:300px; } #append{ border:solid #87A900 2px; border-top:0; display:none; } </style> </head> <body> <div id="container"> <div id="content"> <div class="first"><input id="kw" onKeyup="getContent(this);" /></div> <div id="append"></div> </div> </div> </body> </html>
二、js代码:
<script type="text/javascript"> var data = [ "你好,我是Michael", "你是谁", "你最好啦", "你最珍贵", "你是我最好的朋友", "你画我猜", "你是笨蛋", "你懂得", "你为我着迷", "你是我的眼" ]; $(document).ready(function(){ $(document).keydown(function(e){ e = e || window.event; var keycode = e.which ? e.which : e.keyCode; if(keycode == 38){ if(jQuery.trim($("#append").html())==""){ return; } movePrev(); }else if(keycode == 40){ if(jQuery.trim($("#append").html())==""){ return; } $("#kw").blur(); if($(".item").hasClass("addbg")){ moveNext(); }else{ $(".item").removeClass('addbg').eq(0).addClass('addbg'); } }else if(keycode == 13){ dojob(); } }); var movePrev = function(){ $("#kw").blur(); var index = $(".addbg").prevAll().length; if(index == 0){ $(".item").removeClass('addbg').eq($(".item").length-1).addClass('addbg'); }else{ $(".item").removeClass('addbg').eq(index-1).addClass('addbg'); } } var moveNext = function(){ var index = $(".addbg").prevAll().length; if(index == $(".item").length-1){ $(".item").removeClass('addbg').eq(0).addClass('addbg'); }else{ $(".item").removeClass('addbg').eq(index+1).addClass('addbg'); } } var dojob = function(){ $("#kw").blur(); var value = $(".addbg").text(); $("#kw").val(value); $("#append").hide().html(""); } }); function getContent(obj){ var kw = jQuery.trim($(obj).val()); if(kw == ""){ $("#append").hide().html(""); return false; } var html = ""; for (var i = 0; i < data.length; i++) { if (data[i].indexOf(kw) >= 0) { html = html + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" + data[i] + "</div>" } } if(html != ""){ $("#append").show().html(html); }else{ $("#append").hide().html(""); } } function getFocus(obj){ $(".item").removeClass("addbg"); $(obj).addClass("addbg"); } function getCon(obj){ var value = $(obj).text(); $("#kw").val(value); $("#append").hide().html(""); } </script>
三、运行效果:
1.在输入框输入关键字:
js/jQuery实现类似百度搜索功能
2.键盘上下键选中:
js/jQuery实现类似百度搜索功能
3.enter键输入:
js/jQuery实现类似百度搜索功能
相关文章推荐
- img超出div width时, jQuery动态改变图片显示大小
- jQuery——AJAX(一)
- js学习笔记(二):JQuery中的On绑定事件的方法
- jquery经验1
- java + jquery + ajax + json 交互
- 修改 Jquery Dialog 的位置
- jquery.uploadify+jquery.form异步提交那点事
- jQuery Validate验证框架详解
- jQuery中使用ajax,$.post
- 项目中jquery与easyui冲突的解决方法
- jquery ajax 跨域处理
- jQuery开发之超链接提示效果和图片提示效果
- jquery mobile+iscroll使用时关于页面不能操作input标签问题
- 二、jQuery选择器
- jQuery事件-表单事件
- Jquery实现的Tabs标签页
- jQuery实现复选框批量选择与反选的方法
- Jquery简单实现Datepicker
- jQuery 学习笔记 基础篇六 jQuery事件与应用
- 网页显示百度地图 Jquery