Ajax: an example of how the text in the input box is changed to display the drop-down list

1. Style
Copy codeThe Code is 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 scripts
Copy codeThe Code is as follows:
... Omitted Regular Script

<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"> required * </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>

... Omitted Regular Script
<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"> required * </span>
<Div class = "Menu" id = "List2">
<Div class = "Menu2" id = "ListLi2">
</Div>
</Div>

</Td>
</Tr>

3. Implement ajax asynchronous request filtering based on input content through JS
Copy codeThe Code is as follows:
// When the page is loaded

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-load
JQuery (function ($ ){
TxtValue = $ ("# generalBrandName"). val ();
//// // Bind a keyboard event to txtbox
$ ("# GeneralBrandName"). bind ("keyup", function (){
Var currentValue = $ (this). val ();
If (currentValue! = TxtValue ){
AppendList ('list1', currentValue );
TxtValue = currentValue;
}
});

TxtValue = $ ("# brandName"). val ();
//// // Bind a keyboard event to txtbox
$ ("# BrandName"). bind ("keyup", function (){
Var currentValue = $ (this). val ();
If (currentValue! = TxtValue ){
AppendList ('list2', currentValue );
TxtValue = currentValue;
}
});

});

// Function for dynamically displaying the drop-down list content

// Filter values in obj based on the values in the input box
Function appendList (obj, value ){
Value = encodeURIComponent (value); // use encodeURI () twice ()
Switch (obj ){
Case "List1": // click the value in List1 based on the vehicle brand name.
$. GetJSON (
Ctx + "/car/carmodel/**. do ",
{KeyWord: value, id: new Date (). getTime ()}, <! -- Generate a timestamp to prevent IE from using cache for the same URL -->
Function (json ){
CreateLis ('listli1', json );
}
);
Break;
Case "List2": // click the value in List2 based on the vehicle manufacturer name.
$. GetJSON (
Ctx + "/car/carmodel/**. do ",
{KeyWord: value, id: new Date (). getTime ()}, <! -- Generate a timestamp to prevent IE from using cache for the same URL -->
Function (json ){
CreateLis ('listli2', json );
}
);
Break;
}
}

Function createLis (obj, json ){
Switch (obj ){
Case "ListLi1": // click the value in List1 based on the vehicle brand name.
Var executerDiv = document. getElementById (obj); // 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": // click the value in List2 based on the vehicle manufacturer name.
Var executerDiv = document. getElementById (obj); // 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;
}
}
// Display or hide a Layer
Function showAndHide (obj, types ){
Var layerpolicw.doc ument. getElementById (obj );
Switch (types ){
Case "show ":
Layer. style. display = "block ";
AppendList (obj ,'');
Break;
Case "hide ":
Layer. style. display = "none ";
Break;
}
}

// Obtain the content of the selected node
Function getValue (obj1, str, obj2, idx ){
Var input000000000000doc ument. getElementById (obj1 );
Input. value = str;
Var input000000000000doc ument. getElementById (obj2 );
Input. value = idx;
}

4. Display Results