基于jquery的自动补全自己手写的

$(function() {
	// 自动补全
	var maxcount = 0;// 表示他最大的值
	var thisCount =0;// 初始化他框的位置
	$("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; position: absolute;' id='autoTxt'></div>");
	$("#sele").keyup(function(even) {
		var v = even.which;
		if (v == 38 || v == 40 || v == 13)// 当点击上下键或者确定键时阻止他传送数据
			{
			return;
			}
		var txt = $("#sele").val();//这里是取得他的输入框的值
		if (txt != "") {
			//拼装数据
			$.ajax({
				url : "Birthday_autoCompletion",//从后台取得json数据
				type : "post",
				dataType : "json",
				data : {"bir.userName" : txt
				},
				success : function(ls) {
					var offset = $("#sele").offset();
					$("#autoTxt").show();
					$("#autoTxt").css("top", (offset.top + 30) + "px");
					$("#autoTxt").css("left", offset.left + "px");
					var Candidate = "";
					 maxcount = 0;//再重新得值
					$.each(ls, function(k, v) {
						Candidate += "<li id='" +maxcount+ "'>" + v + "</li>";
						maxcount++;
					});
					$("#autoTxt").html(Candidate);
					$("#autoTxt li:eq(0)").css("background", "#A8A5A5");
					//高亮对象
					$('body').highLight();
					$('body').highLight($("#sele").val());
					event.preventDefault();
						//当单击某个LI时反映
						$("#autoTxt li").click(function(){
							$("#sele").val($("#autoTxt li:eq("+this.id+")").text());
							$("#autoTxt").html("");
							$("#autoTxt").hide();
						});
						//移动对象
						$("#autoTxt li").hover(function(){
							$("#autoTxt li").css("background", "#FFFFFF");
							$("#autoTxt li:eq("+this.id+")").css("background", "#A8A5A5");
							thisCount=this.id;},function(){
								$("#autoTxt li").css("background", "#FFFFFF");});
				},
				error : function() {
					$("#autoTxt").html("");
					$("#autoTxt").hide();
					maxcount = 0;
				}
			});
		} else {
			$("#autoTxt").hide();
			maxcount = 0;
			$("#sestart").click();
		}
	});
	//当单击BODY时则隐藏搜索值
	$("body").click(function(){
		$("#autoTxt").html("");
		$("#autoTxt").hide();
		thisCount=0;
	});
	// 写移动事件//上键38 下键40 确定键 13
	$("body").keyup(function(even) {
		var v = even.which;
			if (v == 38)// 按上键时
			{
				if(thisCount!=0){//等于零时则证明不能上了。所以获得焦点
					$("#sele").blur();
					if(thisCount>0)
						--thisCount;
					else
						thisCount=0;
				$("#autoTxt li").css("background", "#FFFFFF");
				$("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");
				}else{$("#sele").focus();}
			} else if (v == 40) {// 按下键时
				if(thisCount<maxcount-1)
				{
					$("#sele").blur();
					++thisCount;
					$("#autoTxt li").css("background", "#FFFFFF");
					$("#autoTxt li:eq("+thisCount+")").css("background", "#A8A5A5");
				}
			} else if (v == 13) {// 按确认键时
				var tt=$("#"+thisCount).text();
				if(tt!="")
					{
						$("#sele").val(tt);
						$("#autoTxt").html("");
						$("#autoTxt").hide();
					}else
					{
						if($("#sele").val()!="")
						$("#sestart").click();
					}
			} else {
				if($("#autoTxt").html()!="")
					{
						$("#sele").focus();
						thisCount=0;
					}
			}
	});
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值