ajax實現輸入框文字改變展示下拉列表的效果示例

2024-09-01 08:32:37

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了通過ajax實現輸入框文字改變展示下拉列表的效果,需要的朋友可以參考下

1.樣式

復制代碼代碼如下:

2. html腳本

復制代碼代碼如下:

........省略常規腳本

<tr>
<th>汽車品牌名：</th>
<td>
<input type="text" value="${*.generalBrandName}" 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" value="${*.brandIdGeneral}" />
<span>必填*</span>
<div>
<div>
<%-- <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" value="${*.brandName}" 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" value="${*.brandId}" />
<span>必填*</span>
<div>
<div>
</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()}, 
function (json) {
createLis('ListLi1',json);
}
);
break;
case "List2": //根據車廠商名來刷選List2中的值
$.getJSON(
ctx + "/car/carmodel/**.do",
{keyWord : value, id : new Date().getTime()}, 
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;
}