This article mainly introduced through the AJAX implementation of input box text change display drop-down list effect, the need for friends can refer to the
1. Style
Copy code code as follows:
<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 Script
Copy code code as follows:
........ Omit regular scripts
<tr>
<th> Automobile brand name:</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" > Must fill *</span>
<div class= "Menu" id= "List1" >
<div class= "Menu2" id= "ListLi1" >
<%--<ul>--%>
<%--<li onmousedown= "GetValue (' generalbrandname ', ' BMW ', ' brandidgeneral ', ' idx '); Showandhide (' List1 ', ' hide ') ;
"> BMW </li>--%>
<%--<li onmousedown= "GetValue (' generalbrandname ', ' Audi ', ' brandidgeneral ', ' idx '); Showandhide (' List1 ', ' hide ') ;"
> Audi </li>--%>
<%--</ul>--%>
</div>
</div>
</td>
</tr>
........ Omit regular scripts
<tr>
<th> Automobile manufacturer Name:</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" > Must fill *</span>
<div class= "Menu" id= "List2" >
<div class= "Menu2" id= "ListLi2" >
</div>
</div>
</td>
</tr>
3. Through JS to achieve AJAX asynchronous request based on the content of the input filter
Copy code code as follows:
When the page loads
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);
}
});
Pre-loading
JQuery (function ($) {
TxtValue = $ ("#generalBrandName"). Val ();
Binding keyboard events to Txtbox
$ ("#generalBrandName"). Bind ("KeyUp", function () {
var CurrentValue = $ (this). Val ();
if (CurrentValue!= txtValue) {
Appendlist (' List1 ', currentvalue);
TxtValue = CurrentValue;
}
});
TxtValue = $ ("#brandName"). Val ();
Binding keyboard events to Txtbox
$ ("#brandName"). Bind ("KeyUp", function () {
var CurrentValue = $ (this). Val ();
if (CurrentValue!= txtValue) {
Appendlist (' List2 ', currentvalue);
TxtValue = CurrentValue;
}
});
});
To implement a function that dynamically displays the contents of a Drop-down list
Filter the values in obj based on the values in the input box
function Appendlist (obj,value) {
Value = encodeURIComponent (value); Value = encodeURIComponent (value); Two times use encodeURI ()
Switch (obj) {
Case "List1"://According to the car brand name to brush the selection of List1 value
$.getjson (
CTX + "/car/carmodel/**.do",
{keyword:value, Id:new Date (). GetTime ()}, <!--produces a timestamp that does not allow IE to use the cache as the same URL-->
function (JSON) {
Createlis (' ListLi1 ', JSON);
}
);
Break
Case "List2"://According to the car manufacturer name to brush the value of the List2
$.getjson (
CTX + "/car/carmodel/**.do",
{keyword:value, Id:new Date (). GetTime ()}, <!--produces a timestamp that does not allow IE to use the cache as the same URL-->
function (JSON) {
Createlis (' ListLi2 ', JSON);
}
);
Break
}
}
function Createlis (Obj,json) {
Switch (obj) {
Case "LISTLI1"://According to the car brand name to brush the selection of List1 value
var executerdiv = document.getElementById (obj); To dynamically generate a Drop-down list box
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"://According to the car manufacturer name to brush the value of the List2
var executerdiv = document.getElementById (obj); To dynamically generate a Drop-down list box
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
}
}
Show or hide layers
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
}
}
Get the contents of the selected node
function GetValue (OBJ1,STR,OBJ2,IDX) {
var Input=window.document.getelementbyid (OBJ1);
INPUT.VALUE=STR;
var Input=window.document.getelementbyid (OBJ2);
Input.value=idx;
}