通過ajax實現 輸入框文字改變 展示下拉式清單的效果

1.樣式

    <style type="text/css">
   <!--
   body{background:#fff}
   .Menu {
    position:relative;
    width:180px;
    height:120px;
    z-index:1;
    background: #EEE;
    border:1px solid #666;
    margin-top:-100px;
    display:none;
   }
   .Menu2 {
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:120px;
    overflow:hidden;
    z-index:1;
    OVERFLOW-y:auto;
   }
   .Menu2 ul{margin:0;padding:0}
   .Menu2 ul li{width:100%;height:25px;line-height:20px;text-indent:15px;
    border-bottom:1px dashed #999;color:#333;cursor:pointer;
     change:expression(
      this.onmouseover=function(){
        this.style.background="";
      },
      this.onmouseout=function(){
        this.style.background="";
      }
     )
   }
   input{width:120px}   
   #List1,#List2{left:0px;top:103px;}
   -->
  </style>

 

2. html指令碼

........省略常規指令碼

<tr>
       <th>汽車品牌名：</th>
       <td>
        <input type="text" id="generalBrandName" name="generalBrandName" value="${*.generalBrandName}" style="width:180px" data-validation-engine="validate[required]" <c:if test="${!empty carType.brandIdGeneral}"> disabled="disabled" </c:if> onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"/>
        <input type="hidden" id="brandIdGeneral" name="brandIdGeneral" value="${*.brandIdGeneral}" style="width:180px" />
        <span class="required">必填*</span>
         <div class="Menu" id="List1">
          <div class="Menu2" id="ListLi1">
<%--            <ul>--%>
<%--            <li onmousedown="getValue('generalBrandName','寶馬','brandIdGeneral','idx');showAndHide('List1','hide');">寶馬</li>--%>
<%--            <li onmousedown="getValue('generalBrandName','奧迪','brandIdGeneral','idx');showAndHide('List1','hide');">奧迪</li>--%>
<%--         </ul>--%>
          </div>
          </div>
        
       </td>
      </tr>

........省略常規指令碼
      <tr>
       <th>汽車廠商名：</th>
       <td>
        <input type="text" id="brandName" name="brandName" value="${*.brandName}" style="width:180px" data-validation-engine="validate[required]" <c:if test="${!empty carType.brandId}"> disabled="disabled" </c:if> onfocus="showAndHide('List2','show');" onblur="showAndHide('List2','hide');" />
        <input type="hidden" id="brandId" name="brandId" value="${*.brandId}" style="width:180px" />
        <span class="required">必填*</span>
         <div class="Menu" id="List2">
          <div class="Menu2" id="ListLi2">         
          </div>
         </div>
        
       </td>
      </tr>

 

3.通過JS來實現ajax非同步請求 根據輸入的內容過濾

  //頁面載入的時候

  jQuery(function($) {
            if (navigator.userAgent.indexOf("MSIE") > 0) {
                 document.getElementById('generalBrandName').attachEvent("onPropertyChange", appendList);
                 document.getElementById('brandName').attachEvent("onPropertyChange", appendList);
             }
             else if (navigator.userAgent.indexOf("Firefox") > 0) {
                 document.getElementById('generalBrandName').addEventListener("input", appendList, false);         
                 document.getElementById('brandName').addEventListener("input", appendList, false); 
             }
        });
    
    ////////     預先載入
          jQuery(function($) {  
              txtValue = $("#generalBrandName").val();  
              ////////    給txtbox綁定鍵盤事件
              $("#generalBrandName").bind("keyup", function() {
                  var currentValue = $(this).val();
                  if (currentValue != txtValue) {
                   appendList('List1',currentValue);  
                      txtValue = currentValue;
                  }  
              });
             
              txtValue = $("#brandName").val();  
              ////////    給txtbox綁定鍵盤事件
              $("#brandName").bind("keyup", function() {
                  var currentValue = $(this).val();
                  if (currentValue != txtValue) {
                   appendList('List2',currentValue);  
                      txtValue = currentValue;
                  }  
              });
  
          });

    //實現動態顯示下拉式清單內容的function

//根據輸入框中的值來篩選obj中的值
   function appendList(obj,value){
    value = encodeURIComponent(value);  value = encodeURIComponent(value); //兩次使用encodeURI()  
    switch(obj){
      case "List1":      //根據車品牌名來刷選List1中的值
         $.getJSON(
                    ctx + "/car/carmodel/**.do",
                    {keyWord : value, id : new Date().getTime()},  <!-- 產生一個時間戳記，不讓IE以為是相同的URL而使用cache -->
                    function (json) {
              createLis('ListLi1',json);      
          }
          );
       break;
      case "List2":  //根據車廠商名來刷選List2中的值
        $.getJSON(
                     ctx + "/car/carmodel/**.do",
                     {keyWord : value, id : new Date().getTime()},  <!-- 產生一個時間戳記，不讓IE以為是相同的URL而使用cache -->
                     function (json) {
               createLis('ListLi2',json);      
           }
           );
       break;
    }
   }
   
   function createLis(obj,json){
    switch(obj){
      case "ListLi1":      //根據車品牌名來刷選List1中的值
        var executerDiv =  document.getElementById(obj);   //動態產生下拉式清單方塊
              executerDiv.innerHTML="";
     var ul=document.createElement("ul");
     $.each(json, function (i, item) {
       var li=document.createElement("li");
       var str = "getValue('generalBrandName','"+item.brandNameGeneral+"','brandIdGeneral','"+item.brandIdGeneral+"');showAndHide('List1','hide')";
          li.setAttribute("onmousedown",str);
          li.appendChild(document.createTextNode(item.brandNameGeneral)); 
          ul.appendChild(li); 
     });
     executerDiv.appendChild(ul);
       break;
      case "ListLi2":  //根據車廠商名來刷選List2中的值
       var executerDiv =  document.getElementById(obj);   //動態產生下拉式清單方塊
              executerDiv.innerHTML="";
     var ul=document.createElement("ul");
     $.each(json, function (i, item) {
       var li=document.createElement("li");
       var str = "getValue('brandName','"+item.brandName+"','brandId','"+item.brandId+"');showAndHide('List1','hide')";
          li.setAttribute("onmousedown",str);
          li.appendChild(document.createTextNode(item.brandName)); 
          ul.appendChild(li); 
     });
     executerDiv.appendChild(ul);
       break;
    }
   }
   //顯示或者隱藏層
   function showAndHide(obj,types){
       var Layer=window.document.getElementById(obj);
       switch(types){
      case "show":
        Layer.style.display="block";
        appendList(obj,'');
       break;
      case "hide":
        Layer.style.display="none";
       break;
    }
     } 
   
    //擷取選中節點的內容
    function getValue(obj1,str,obj2,idx){      
       var input=window.document.getElementById(obj1);
    input.value=str;
    var input=window.document.getElementById(obj2);
    input.value=idx;
    }

 

4.展示效果