Ajax implementiert den Effekt, den Text des Eingabefelds zu ändern, um die Dropdown-Liste anzuzeigen

In diesem Artikel wird hauptsächlich der Effekt der Änderung des Eingabefeldtextes und der Anzeige der Dropdown-Liste über Ajax vorgestellt

Stil

<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-Skript

........省略常规脚本 
<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(&#39;List1&#39;,&#39;show&#39;);" onblur="showAndHide(&#39;List1&#39;,&#39;hide&#39;);"/> 
<input type="hidden" id="brandIdGeneral" name="brandIdGeneral" value="${*.brandIdGeneral}" style="width:180px" /> 
<span class="required">必填*</span> 
<p class="Menu" id="List1"> 
<p class="Menu2" id="ListLi1"> 
<%-- <ul>--%> 
<%-- <li onmousedown="getValue(&#39;generalBrandName&#39;,&#39;宝马&#39;,&#39;brandIdGeneral&#39;,&#39;idx&#39;);showAndHide(&#39;List1&#39;,&#39;hide&#39;);">宝马</li>--%> 
<%-- <li onmousedown="getValue(&#39;generalBrandName&#39;,&#39;奥迪&#39;,&#39;brandIdGeneral&#39;,&#39;idx&#39;);showAndHide(&#39;List1&#39;,&#39;hide&#39;);">奥迪</li>--%> 
<%-- </ul>--%> 
</p> 
</p> 
</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(&#39;List2&#39;,&#39;show&#39;);" onblur="showAndHide(&#39;List2&#39;,&#39;hide&#39;);" /> 
<input type="hidden" id="brandId" name="brandId" value="${*.brandId}" style="width:180px" /> 
<span class="required">必填*</span> 
<p class="Menu" id="List2"> 
<p class="Menu2" id="ListLi2"> 
</p> 
</p> 
</td> 
</tr>

3. Implementieren Sie eine asynchrone Ajax-Anforderungsfilterung basierend auf Eingabeinhalten

//页面加载的时候 
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(&#39;ListLi1&#39;,json); 
} 
); 
break; 
case "List2": //根据车厂商名来刷选List2中的值 
$.getJSON( 
ctx + "/car/carmodel/**.do", 
{keyWord : value, id : new Date().getTime()}, <!-- 产生一个时间戳，不让IE以为是相同的URL而使用cache --> 
function (json) { 
createLis(&#39;ListLi2&#39;,json); 
} 
); 
break; 
} 
} 
function createLis(obj,json){ 
switch(obj){ 
case "ListLi1": //根据车品牌名来刷选List1中的值 
var executerp = document.getElementById(obj); //动态生成下拉列表框 
executerp.innerHTML=""; 
var ul=document.createElement("ul"); 
$.each(json, function (i, item) { 
var li=document.createElement("li"); 
var str = "getValue(&#39;generalBrandName&#39;,&#39;"+item.brandNameGeneral+"&#39;,&#39;brandIdGeneral&#39;,&#39;"+item.brandIdGeneral+"&#39;);showAndHide(&#39;List1&#39;,&#39;hide&#39;)"; 
li.setAttribute("onmousedown",str); 
li.appendChild(document.createTextNode(item.brandNameGeneral)); 
ul.appendChild(li); 
}); 
executerp.appendChild(ul); 
break; 
case "ListLi2": //根据车厂商名来刷选List2中的值 
var executerp = document.getElementById(obj); //动态生成下拉列表框 
executerp.innerHTML=""; 
var ul=document.createElement("ul"); 
$.each(json, function (i, item) { 
var li=document.createElement("li"); 
var str = "getValue(&#39;brandName&#39;,&#39;"+item.brandName+"&#39;,&#39;brandId&#39;,&#39;"+item.brandId+"&#39;);showAndHide(&#39;List1&#39;,&#39;hide&#39;)"; 
li.setAttribute("onmousedown",str); 
li.appendChild(document.createTextNode(item.brandName)); 
ul.appendChild(li); 
}); 
executerp.appendChild(ul); 
break; 
} 
} 
//显示或者隐藏层 
function showAndHide(obj,types){ 
var Layer=window.document.getElementById(obj); 
switch(types){ 
case "show": 
Layer.style.display="block"; 
appendList(obj,&#39;&#39;); 
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 Ich hoffe, dass der gesamte Inhalt dieses Artikels für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!
Verwandte Empfehlungen:

JQuery verwendet $.ajax und ein Kontrollkästchen, um die nächste Abwesenheitsbenachrichtigungsfunktion zu implementieren

JS in Ajax Der Code erhält automatisch den Formularelementwert

Das obige ist der detaillierte Inhalt vonAjax implementiert den Effekt, den Text des Eingabefelds zu ändern, um die Dropdown-Liste anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!