在输入框输入数据时,自动提示与输入相关的数据
以下是在输入框输入数据时,自动提示与输入相关的数据,数据从数据库中查询的:
【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"; }
【效果图】

【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .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 中如何实现缓存的预热?