自己写的一个jquery自动完成例子...
时间：2010-08-19 来源：Fly_Sky520
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效果图
相关阅读 更多 +
