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

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

 

【HTML部分】	
<div class="itempanel">
			<div class="floatleft title">退货配送人:</div>
			<div class="floatleft editor"><input type="text" id="username" name="username" onkeyup="find_user('username')" value=""></div>
				<input type="hidden" id="usernameid" name="usernameid" value=""/>
				<div id="usernameDiv" style="display: none;position: fixed;width:354px">
					<select multiple="multiple" onclick="selected('username')" id="usernameShow" name="usernameShow" style="width: 401px; margin-left: 134px; margin-top: 24px;" onmouseout="isClick('username')">
					</select>
				</div>
			<div class="floatleft message">请在此输入退货配送人姓名!</div>
			<div class="clear"></div>
		</div>
		
		<div class="itempanel">
			<div class="floatleft title">退货配送人电话:</div>
			<div class="floatleft editor"><input type="text" id="phone" name="phone" /></div>
			<div class="floatleft message">请在此输入退货配送人电话!</div>
			<div class="clear"></div>
</div>

【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.length;i++){
				$('#'+name+'Show').append('<option value="'+userlist[i].phone+'">'+userlist[i].nickname+'</option>');
			}
        },
        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";
}
 
【效果图】

 

 

posted @   宋发元  阅读(964)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
点击右上角即可分享
微信分享提示