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

版权声明：转载请注明出处。 原文作者：宋发元 原文链接：http://blog.csdn.net/u011019141

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

1. 【HTML部分】      

1. <div class="itempanel">  
2.             <div class="floatleft title">退货配送人：</div>  
3.             <div class="floatleft editor"><input type="text" id="username" name="username" οnkeyup="find_user('username')" value=""></div>  
4.                 <input type="hidden" id="usernameid" name="usernameid" value=""/>  
5.                 <div id="usernameDiv" style="display: none;position: fixed;width:354px">  
6.                     <select multiple="multiple" οnclick="selected('username')" id="usernameShow" name="usernameShow" style="width: 401px; margin-left: 134px; margin-top: 24px;" οnmοuseοut="isClick('username')">  
7.                     </select>  
8.                 </div>  
9.             <div class="floatleft message">请在此输入退货配送人姓名！</div>  
10.             <div class="clear"></div>  
11.         </div>  
12.           
13.         <div class="itempanel">  
14.             <div class="floatleft title">退货配送人电话：</div>  
15.             <div class="floatleft editor"><input type="text" id="phone" name="phone" /></div>  
16.             <div class="floatleft message">请在此输入退货配送人电话！</div>  
17.             <div class="clear"></div>  
18. </div>  

1. </pre><pre code_snippet_id="1569952" snippet_file_name="blog_20160129_4_8588822" name="code" class="html">【JavaScript部分】  

1. //请求数据-----根据输入的信息查找管理员信息  
2. function find_user(name){  
3.     $("#"+name+"id").val('');  
4.     var userName=document.getElementById(name).value;  
5.     $.ajax({  
6.         url:'<%=basePath%>user/selbymanagement',  
7.         type:'POST',  
8.         data:'username='+userName,  
9.         success:function(data)  
10.         {  
11.             document.getElementById(name+"Div").style.display="block";  
12.             var jsonData = eval('(' + decodeURIComponent(data) + ')');  
13.             console.log(jsonData);  
14.             var userlist=jsonData.data;  
15.             document.getElementById(name+"Show").innerHTML = "";  
16.             for(var i =0;i<userlist.length;i++){  
17.                 $('#'+name+'Show').append('<option value="'+userlist[i].phone+'">'+userlist[i].nickname+'</option>');  
18.             }  
19.         },  
20.         error: function(data, error, msg)  
21.         {  
22.             console.log(data);  
23.             console.log(error);  
24.             console.log(msg);  
25.         }  
26.     });  
27. }  
28. //选择  
29. function selected(name){  
30.     var userphone=$("#"+name+"Show option:selected").val();  
31.     var username=$("#"+name+"Show option:selected").text();  
32.     $("#"+name+"id").val(userphone);  
33.     $("#"+name).val(username);  
34.     document.getElementById("phone").value=userphone;  
35.     showNone(name);  
36. }  
37. //判断是否是在显示结果之外点击  
38. function isClick(name){  
39.     document.onclick = function(e){   
40.         var id=$("#"+name+"id").val();  
41.         if(id==null||id==""||id==undefined){  
42.             $("#"+name).val('');  
43.         }  
44.         showNone(name);  
45.     }  
46. }  
47. //失去焦点事件  
48. function showNone(showName){  
49.     document.getElementById(showName+"Div").style.display="none";  
50. }  

转载于:https://www.cnblogs.com/songfayuan/articles/7290347.html