Ajax implémente l'effet de modifier le texte de la zone de saisie pour afficher la liste déroulante

Cet article présente principalement l'effet de la modification du texte de la zone de saisie et de l'affichage de la liste déroulante via ajax. Les amis dans le besoin peuvent s'y référer

1. 2. Script HTML

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

3. Implémenter le filtrage des requêtes asynchrones ajax basé sur le contenu d'entrée via JS

........省略常规脚本 
<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>

4. Effet d'affichage

//页面加载的时候 
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; 
}

Ce qui précède est Nous espérons que l'ensemble du contenu de cet article sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention au site Web PHP chinois !
Recommandations associées :

JQuery utilise $.ajax et une case à cocher pour implémenter la prochaine fonction de notification d'absence

JS en Ajax Le code obtient automatiquement la valeur de l'élément de formulaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!