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

這篇文章主要介紹了通過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; 

}