您的位置：首页 > Web前端 > JQuery

自己写的一个JQuery自动完成例子

2010-08-20 10:51 621 查看

1，html部分

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>search and autocomplete</title>
<link href="../css/autocomplete.css" mce_href="css/autocomplete.css" rel="stylesheet" type="text/css" />
<mce:script src="../js/jquery-1.3.1.js" mce_src="js/jquery-1.3.1.js" type="text/javascript"><!--

// --></mce:script>
<mce:script src="../js/jquery.autocomplete.js" mce_src="js/jquery.autocomplete.js" type="text/javascript"><!--

// --></mce:script>
<mce:script type="text/javascript"><!--
$(function(){
$(".search>#searchText").keyup(function(e){
var $text = $(this);

if ($text.val() != null && $text.val().trim() != "") {

$.getJSON('searchJson.json', function(data){
var flag = 0;
var indexOfPos = 0;
$(".autoBox").empty();//先清楚弹出提示框的内容
var display = "<table><tr><td width=" + $text.css("width") + ">";
$.each(data, function(commentIndex, comment){//请求ajax数据（此处为json）
if (!comment['searchText'].indexOf($text.val())) {//如果json里面有所输入的相应检索，而加入到html标签内
display += comment['searchText'] + "</td></tr><tr><td>";
flag = 1;
}
})
if (flag == 1) {
display = display.substring(0, display.length - 8);//此地方减去后面8个字符的原因是因为上面display的后面会多一个"<tr><td>",故先去掉此字符串，再加上"</table>"
display += "</table>";
$(".autoBox").html(display);//把数据表添加到弹出提示框
$(".shadow").show().slideDown(10000);//显示弹出提示框

$(".autoBox").css({ //弹出提示框的宽度设置
width: $text.css("width")
});

$(".shadow").css({//弹出提示框的位置设置
top: $text.css("bottom"),
left: ($text.offset().left + 3) + "px"
});

$(document).keypress(function(e){//方向键事件 这个地方有点冲突 需要改进  先只贴上此部分代码
//									alert("键盘事件="+e.keyCode)
//									alert("索引="+indexOfPos)
//									alert("长度="+$(".autoBox table tr").length)
if(e.keyCode == 38){ //向上键
//										alert("键盘事件：上")
--indexOfPos;
if(indexOfPos<1){
indexOfPos = 1;
}else{
var currentTr = $(".autoBox table tr:nth-child("+indexOfPos+")");
$(".search>#searchText").val(currentTr.text());
currentTr.css({"background-color" : "#F000FF" , cursor : "pointer" }).siblings().css("background-color", "#E6EA00");
}
}else if(e.keyCode == 40){ //向下键
//										alert("键盘事件：下")
++indexOfPos;
if(indexOfPos>$(".autoBox table tr").length){
indexOfPos = $(".autoBox table tr").length;
}else{
var currentTr = $(".autoBox table tr:nth-child("+indexOfPos+")");
$(".search>#searchText").val(currentTr.text());
currentTr.css({"background-color" : "#F000FF" , cursor : "pointer" }).siblings().css("background-color", "#E6EA00");
}
}
});

$("table tr").css({//使弹出提示框的table中的tr左对齐
"text-align" : "left"
});

$("table tr").hover(function(){//鼠标放在弹出提示框的table上时，执行的hover事件
$(this).css({"background-color" : "#F000FF" , cursor : "pointer" });
$(this).click(function(){
$(".search>#searchText").val($(this).text());
$(".shadow").hide();
})
}, function(){
$(this).css("background-color", "#E6EA00");
});
}else {//当没有相应的提示时，隐藏弹出提示框
$(".shadow").hide();
};
})
}
else {//当输入框里面没有数据时 隐藏弹出提示框
$(".shadow").hide();
};

$(window).resize(function(){//窗口重置时能够保证弹出提示框框的位置永远处于输入框的下沿
$(".shadow").css({
top: $text.css("bottom"),
left: ($text.offset().left + 3) + "px"
});
});
})
});

// --></mce:script>
</head>
<body>
<div class="search">
搜索:<input id="searchText"/>
</div>
<div class="shadow">
<div class="autoBox">
</div>
</div>
</body>
</html>

2，json数据源searchJson.json

[
{
"searchText": "张三0"
},
{
"searchText": "张三00"
},
{
"searchText": "张三000"
},
{
"searchText": "李四0"
},
{
"searchText": "李四00"
},
{
"searchText": "李四000"
},
{
"searchText": "王五00"
},
{
"searchText": "张三11"
},
{
"searchText": "李四11"
},
{
"searchText": "王五11"
},
{
"searchText": "张三22"
},
{
"searchText": "李四22"
},
{
"searchText": "王五22"
},
{
"searchText": "张三33"
},
{
"searchText": "王五44"
},
{
"searchText": "张三55"
},
{
"searchText": "李四55"
},
{
"searchText": "王五55"
}
]

3,css文件autocomplete.css

body{
text-align:center;
margin:200px auto;
}
.autoBox{
float:left;
border: 1px solid #A9C9E2;
background-color: #E6EA00;
margin-top: -3px;
margin-bottom: 3px;
margin-left: -3px;
margin-right: 3px;
}
.shadow{
float:left;
background :no-repeat right bottom #A9C9E2;
position: absolute;
border: 1px solid #A9C9E2;

}

4效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航