在输入框输入数据时,自动提示与输入相关的数据

以下是在输入框输入数据时,自动提示与输入相关的数据,数据从数据库中查询的:

 

【HTML部分】	
退货配送人:
请在此输入退货配送人姓名!
退货配送人电话:
请在此输入退货配送人电话!
【JavaScript部分】
//请求数据-----根据输入的信息查找管理员信息
function find_user(name){
	$("#"+name+"id").val('');
	var userName=document.getElementById(name).value;
	$.ajax({
		url:'<%=basePath%>user/selbymanagement',
		type:'POST',
		data:'username='+userName,
		success:function(data)
        {
			document.getElementById(name+"Div").style.display="block";
			var jsonData = eval('(' + decodeURIComponent(data) + ')');
			console.log(jsonData);
			var userlist=jsonData.data;
			document.getElementById(name+"Show").innerHTML = "";
			for(var i =0;i'+userlist[i].nickname+'');
			}
        },
        error: function(data, error, msg)
        {
        	console.log(data);
        	console.log(error);
        	console.log(msg);
        }
    });
}
//选择
function selected(name){
	var userphone=$("#"+name+"Show option:selected").val();
	var username=$("#"+name+"Show option:selected").text();
	$("#"+name+"id").val(userphone);
	$("#"+name).val(username);
	document.getElementById("phone").value=userphone;
	showNone(name);
}
//判断是否是在显示结果之外点击
function isClick(name){
	document.onclick = function(e){ 
		var id=$("#"+name+"id").val();
		if(id==null||id==""||id==undefined){
			$("#"+name).val('');
		}
		showNone(name);
	}
}
//失去焦点事件
function showNone(showName){
	document.getElementById(showName+"Div").style.display="none";
}

 

【效果图】

在输入框输入数据时,自动提示与输入相关的数据_第1张图片

 

你可能感兴趣的:(学习笔记)