<select/><div/><input/>组合下拉…

需要实现的功能：
      功能描述：在文本框输入相关联信息，根据相关信息到数据库进行模糊查询然后到前台显示，显示后选中数据传到后台。
      实现功能的方法：ajax异步交换数据,html dom解析
      实现功能过程：



              （1）html代码
            //此处代码从网上复制

1. <div style="border:0px  solid green;  font-size :14PX;white-space:nowrap;
2.            width:230px;position:absolute;left:320px;top:100px">卡号：</div>
3. <div style="position:relative;">  
4.   <span style="margin-left:230px;width:18px;overflow:hidden;">
5.      <select style="HEIGHT: 22px; WIDTH: 250px; margin-left:-190px;"  οnchange="SelectValue(this)" οnclick="SelMatch(this)"  id="SelectOption" >
6.      </select>
7.    </span>
8.      <input name="card.cardNo" id="box2" style="width:230px;position:absolute;left:40px;" οnkeyup="indistinctcard();InputValue(this)"  οnblur="NoMsg()" οnfοcus="this.select();InputValue(this)"/>  
9.      <div id="msg" style="border:1px  solid green;  font-size :14PX;white-space:nowrap;overflow:hidden;width:230px;position:absolute;left:40px;top:20px;display:none">
10.      </div>
11.  </div>
12.  <Input Type="Hidden" Name="txtSection" id="txtSection">

    （2）通过解析html dom控制div显示，以及赋值代码

//此处代码从网上复制

1. var j = 0;
2. function SelectValue(obj)
3. {
4.     var input = obj.parentNode.nextSibling;
5.     document.all.box2.value = obj.options[obj.selectedIndex].text;
6. //    alert(document.all.box2.value);
7.     document.getElementByIdx_x("txtSection").value=obj.options[obj.selectedIndex].value;
8. //    alert(document.getElementByIdx_x("txtSection").value);
9. }
10.  
11. function InputValue(obj)
12. {
13.     var n = 1;   
14.     var tmpObj;
15.     var src = document.all.SelectOption;
16.     var msg = document.all.msg;
17.     if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){
18.         if(obj.value!=""){
19.              msg.style.display="";
20.              msg.innerHTML="";
21.              if(msg.hasChildNodes())
22.              {
23.                 msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]);
24.              }
25.              
26.              for (var i=0;i<src.length;i++){
27.                var selValue = document_createElement_x("div");
28.                var selText = document_createElement_x("div");
29.                selText.value = src(i).value;
30.                selText.innerHTML = src(i).text;         
31.  
32.                if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase())==0){
33.                     selText.setAttribute("id","selText"+n);
34.                     selText.οnmοuseοver=function (){  
35.                     this.style.backgroundColor='#003399';  
36.                     this.style.color ='#ffffff';
37.                    }
38.                    selText.οnmοuseοut=function (){  
39.                     this.style.backgroundColor='#ffffff';
40.                     this.style.color ='#000000';
41.                    }
42.                    selText.οnclick=function (){  
43.                     document.all.box2.value = this.innerHTML;
44.                     msg.style.display="none";
45.                     document.getElementByIdx_x("txtSection").value=this.value;
46.                    }
47.                     msg.a(selText);
48.                     n++;
49.                }
50.              }
51.         }
52.         else {
53.             document.all.msg.style.display="none";
54.         }
55.     }
56.     else {
57.         //press down key
58.         if(event.keyCode==40){
59.             j++;
60.             for (var i=0; i<src.length; i++)
61.             {
62.                 tmpObj = document.getElementByIdx_x("selText"+i);
63.                 if(tmpObj != null){
64.                     tmpObj.style.backgroundColor='#ffffff';
65.                     tmpObj.style.color ='#000000';
66.                 }               
67.             }
68.             tmpObj = document.getElementByIdx_x("selText"+j);
69.             if(tmpObj != null){
70.                 tmpObj.style.backgroundColor='#003399';  
71.                 tmpObj.style.color ='#ffffff';
72.             }else{
73.                 j = 0;
74.             }           
75.         }
76.         //press up key
77.         if (event.keyCode==38){
78.             j--;
79.             for (var i=0; i<src.length; i++)
80.             {
81.                 tmpObj = document.getElementByIdx_x("selText"+i);
82.                 if(tmpObj != null){
83.                     tmpObj.style.backgroundColor='#ffffff';
84.                     tmpObj.style.color ='#000000';
85.                 }               
86.             }
87.             tmpObj = document.getElementByIdx_x("selText"+j);
88.             if(tmpObj != null){
89.                 tmpObj.style.backgroundColor='#003399';  
90.                 tmpObj.style.color ='#ffffff';
91.             }else{
92.                 j = 2;
93.             }       
94.         }
95.         //press enter key
96.         if (event.keyCode==13){
97.             tmpObj = document.getElementByIdx_x("selText"+j);
98.             document.all.box2.value = tmpObj.innerHTML;
99.             msg.style.display="none";
100.             document.getElementByIdx_x("txtSection").value=tmpObj.value;
101.         }
102.     }
103. }
104.  
105. function SelMatch(src)
106. {
107.     var currSel = document.all.box2.value;
108.     for (var i=0;i<src.length;i++){
109.         if (src(i).text==currSel)
110.         {
111.             src.options(i).selected = true;
112.         }       
113.     }
114. }
115.  
116. function NoMsg()
117. {   
118.     if(document.activeElement.id=="msg")
119.         return false;
120.     else
121.         document.all.msg.style.display='none';
122. }

    （3）解析html select标签并手动生成option标签

indistinct=function(){              

1.                 var indistinctdata=document.all.box2.value;
2.                 var ret=this.ajaxRequest("/json/indistinctdata",indistinctdata);              
3.                 var rolesList=ret.rolesList;
4.                 var myselect=document.getElementByIdx_x("SelectOption");
5.                
6.                 var x=document_createElement_x('option');
7.                 x.text='---Please Select---';
8.                   myselect.add(x,null);
9.                
10.                 for(;myselect.length>1;){
11.                     myselect.remove(myselect.length-1);
12.                 }
13.                 for(var i=0;i<rolesList.length;i++){
14.                 var y=document_createElement_x('option');
15.                 y.text=rolesList[i].rolename;
16. //                y.value=rolesList[i].rolename;
17.                     try
18.                       {
19.                       myselect.add(y,null); // standards compliant
20.                       }
21.                     catch(ex)
22.                       {
23.                       myselect.add(y); // IE only
24.                       }
25.                     }  
26. //           document.getElementByIdx_x("select").attachEvent('onmouseover',indistinct);
27. //           document.getElementByIdx_x("select").style.display='block';
28.                 }

                       
              （4）通过ajax传值（pstr）到后台
      //此处代码出自于我师傅

1. //new 3个对象
2. transportFactory = [function() {
3.     return new XMLHttpRequest();
4.    
5. }, function() {
6.     return new ActiveXObject('Microsoft.XMLHTTP');
7. }, function() {
8.     return new ActiveXObject('Msxml2.XMLHTTP');
9. }];
10. // 得到Ajax本浏览器实现对象
11. createNewTransport = function() {
12.     var factory = transportFactory;
13.     var transport = null;
14.     for (var i = 0, length = factory.length; i < length; i++) {
15.         var lambda = factory[i];
16.         try {
17.             transport = lambda();
18.             break;
19.         } catch (e) {
20.         }
21.     }
22.     return transport;
23. }
24. //ajax请求主要代码
25. ajaxRequest = function(purl,pstr)
26. {
27.     var con = createNewTransport();
28.     var url = window.location.protocol+ "//" + window.location.host + "/ACServer";
29.     url = url + purl;  //根据传入的purl生成url
30.     con.open("POST", url, false);
31.     con.setRequestHeader('encoding','UTF-8');
32.     con.setRequestHeader("content-Type",'application/json');
33.     var jsonRet = {};
34.     con.send(pstr);
35.     if(con.readyState == 4){
36.         var status = con.status
37.         if(status == 200){
38.             try{
39.                 //alert(con.responseText);
40.                 jsonRet = eval_r("(" + con.responseText + ")");
41.             }
42.             catch(e){
43.                 alert("jsonRet error!");
44.                 return {};
45.             }
46.         }
47.     }
48.     //alert(status);
49.     return jsonRet;
50. }

  （5）后台action接受数据并解析

public String execute() throws Exception {

1.         HttpServletRequest request = (HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);
2.         java.io.InputStream ins = request.getInputStream();
3.         InputStreamReader insr = new InputStreamReader(ins);
4.         int size = Integer.parseInt(request.getHeader("content-length"));
5.         char buf[] = new char[size];
6.         insr.read(buf, 0, size);
7.         String indistinct=new String(buf);
8.        
9.         if(indistinct==null){
10.            this.rolesList=this.rolesDao.getRoleses();
11.         }else{
12.         this.rolesList=this.rolesDao.getRolesByIndistinct(indistinct);
13.         List<Roles> rolesListNew=new ArrayList<Roles>();
14.         for(int i=0;i<this.rolesList.size();i++){
15.              Roles roles=new Roles();
16.              roles.setRolename(this.rolesList.get(i).getRolename());
17.              roles.setId(this.rolesList.get(i).getId());
18.              roles.setRoleComment(this.rolesList.get(i).getRoleComment());
19.              rolesListNew.add(roles);
20.         }
21.         this.rolesList=rolesListNew;
22.         }
23.         return super.execute();
24.     }

总结：
      总体流程：
                        由于<select/>标签不支持手动编辑，所以用一个<input/>标签覆盖<select/>标签显示的位置；然后为了达到边输入边显示数据的效果，所以增加一个<div/>来动态显示查询得来的数据，此<div/>紧跟在<input/>标签下面，然后通过<input/>标签的name属性将数据再次传到后台，步骤（1），（2）完成此过程。
                        步骤（3）调用步骤（4）将<input/>标签里的数据即时传到后台，然后步骤（5）接受到json格式的数据然后解析成String到数据库进行模糊查询，在然后步骤（3）通过调用步骤（4）得到后台传回来的数据并动态为<select/>标签生成<option/>标签。
                        ajax前后台传数据请参照ajax博文