类百度搜索提示
2016-06-30 10:56
218 查看
<!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="jquery.min.js"></script>
<style type="text/css">
#container input{
border:solid #87A900 2px;
width:288px;
height:30px;
font-size:16px;
padding:0 5px;
line-height:30px;
}
#container .item{
padding:3px 5px;
cursor:pointer;
}
#container .addbg{
background:#87A900;
}
#container .first{
width:300px;
}
#container .append{
border:solid #87A900 2px;
border-top:0;
display:none;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div class="first"><input class="kw" onKeyup="getContent(this);" /></div>
<div class="append"></div>
</div>
</div>
<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("");
}
$(function(){
$c = $(".append");
$c.hide();
$(".input1").on({
"click" : function() {
$c.toggle();
return false;
}
});
$(document).on({
"click" : function(e) {
var src = e.target;
if (src.id && src.id === "c") {
return false;
} else {
$c.hide();
}
}
});
})
</script>
</body>
</html>
<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="jquery.min.js"></script>
<style type="text/css">
#container input{
border:solid #87A900 2px;
width:288px;
height:30px;
font-size:16px;
padding:0 5px;
line-height:30px;
}
#container .item{
padding:3px 5px;
cursor:pointer;
}
#container .addbg{
background:#87A900;
}
#container .first{
width:300px;
}
#container .append{
border:solid #87A900 2px;
border-top:0;
display:none;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div class="first"><input class="kw" onKeyup="getContent(this);" /></div>
<div class="append"></div>
</div>
</div>
<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("");
}
$(function(){
$c = $(".append");
$c.hide();
$(".input1").on({
"click" : function() {
$c.toggle();
return false;
}
});
$(document).on({
"click" : function(e) {
var src = e.target;
if (src.id && src.id === "c") {
return false;
} else {
$c.hide();
}
}
});
})
</script>
</body>
</html>
相关文章推荐
- 浅谈asp.net通过本机cookie仿百度(google)实现搜索input框自己主动弹出搜索提示
- 润乾 报表模板里实现动态搜索提示(类似百度提示)
- 从东莞扫黄看谷歌百度的搜索提示
- 老二牛车Axure夜话:中继器系列视频教程之中继器百度搜索提示
- 使用jqueryUI和corethink实现的类似百度的搜索提示
- QComboBox:类似于的百度的搜索提示
- 仿百度ajax搜索提示(jsp)
- 浅谈asp.net通过本机cookie仿百度(google)实现搜索input框自动弹出搜索提示
- 使用jqueryUI和corethink实现的类似百度的搜索提示
- 百度优化关键字排名感想
- 【白话经典算法系列之十二】数组中只出现1次的两个数字(百度面试题)
- 模仿百度首页“元宵节汤圆”动图(js的定时任务:setInterval)
- 百度面试题2012
- 使用scrapy选择器selector解析获取百度结果
- 百度:吉祥三宝
- 百度回应“偷拍插件”:凤巢系统并非面向普通用户
- 狂奔336天之后:王劲离场 景驰加盟百度 这样的结局似曾相识
- android中使用百度定位sdk实时的计算移动距离
- 集成百度地图、百度Logo、标尺、缩放控件的显示和隐藏
- 抵制百度,力挺Google