本篇內(nèi)容主要講解“ajax怎么實(shí)現(xiàn)輸入框文字改變展示下拉列表的效果”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“ajax怎么實(shí)現(xiàn)輸入框文字改變展示下拉列表的效果”吧!

創(chuàng)新互聯(lián)于2013年成立，公司以網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、系統(tǒng)開(kāi)發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計(jì)等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶1000+，涉及國(guó)內(nèi)多個(gè)省份客戶。擁有多年網(wǎng)站建設(shè)開(kāi)發(fā)經(jīng)驗(yàn)。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計(jì)、宣傳推廣等服務(wù)。 通過(guò)專業(yè)的設(shè)計(jì)、獨(dú)特的風(fēng)格，為不同客戶提供各種風(fēng)格的特色服務(wù)。

1.樣式

復(fù)制代碼 代碼如下:

2. html腳本

復(fù)制代碼 代碼如下:

........省略常規(guī)腳本


汽車品牌名：

disabled="disabled" onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"/>

必填*

........省略常規(guī)腳本

汽車廠商名：

disabled="disabled" onfocus="showAndHide('List2','show');" onblur="showAndHide('List2','hide');" />

必填*

3.通過(guò)JS來(lái)實(shí)現(xiàn)ajax異步請(qǐng)求 根據(jù)輸入的內(nèi)容過(guò)濾

復(fù)制代碼 代碼如下:

//頁(yè)面加載的時(shí)候

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);
}
});

//////// 預(yù)加載
jQuery(function($) {
txtValue = $("#generalBrandName").val();
//////// 給txtbox綁定鍵盤(pán)事件
$("#generalBrandName").bind("keyup", function() {
var currentValue = $(this).val();
if (currentValue != txtValue) {
appendList('List1',currentValue);
txtValue = currentValue;
}
});

txtValue = $("#brandName").val();
//////// 給txtbox綁定鍵盤(pán)事件
$("#brandName").bind("keyup", function() {
var currentValue = $(this).val();
if (currentValue != txtValue) {
appendList('List2',currentValue);
txtValue = currentValue;
}
});

});

//實(shí)現(xiàn)動(dòng)態(tài)顯示下拉列表內(nèi)容的function

//根據(jù)輸入框中的值來(lái)篩選obj中的值
function appendList(obj,value){
value = encodeURIComponent(value); value = encodeURIComponent(value); //兩次使用encodeURI()
switch(obj){
case "List1": //根據(jù)車品牌名來(lái)刷選List1中的值
$.getJSON(
ctx + "/car/carmodel/**.do",
{keyWord : value, id : new Date().getTime()},
function (json) {
createLis('ListLi1',json);
}
);
break;
case "List2": //根據(jù)車廠商名來(lái)刷選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": //根據(jù)車品牌名來(lái)刷選List1中的值
var executerDiv = document.getElementById(obj); //動(dòng)態(tài)生成下拉列表框
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": //根據(jù)車廠商名來(lái)刷選List2中的值
var executerDiv = document.getElementById(obj); //動(dòng)態(tài)生成下拉列表框
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;
}
}

//獲取選中節(jié)點(diǎn)的內(nèi)容
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.展示效果

到此，相信大家對(duì)“ajax怎么實(shí)現(xiàn)輸入框文字改變展示下拉列表的效果”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)頁(yè)題目：ajax怎么實(shí)現(xiàn)輸入框文字改變展示下拉列表的效果
文章URL：http://weahome.cn/article/pepphe.html