<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
* {
margin:0;
padding:0;
List-style:none;
}
. box {
width:640px;
height:36px;
margin:100px Auto;
position:relative;
}
. searchbox {
border:1px solid #b6b6b6;
Border-color: #7b7b7b #b6b6b6 #b6b6b6 #7b7b7b;
Background: #fff;
Display:inline-block;
Vertical-align:top;
width:539px;
height:35px;
margin-right:0;
border-right-width:0;
Border-color: #ccc #b8b8b8 of #b8b8b8 transparent;
Overflow:hidden;
Float:left;
}
. Search {
width:526px;
height:22px;
font:16px/18px Arial;
line-height:22px\9;
margin:6px 0 0 7px;
padding:0;
Background:transparent;
border:0;
outline:0;
-webkit-appearance:none;
}
. btn {
Display:inline-block;
width:100px;
height:36px;
Color:white;
font-size:15px;
letter-spacing:1px;
Background: #3385ff;
border-bottom:1px solid #2d78f4;
Outline:medium;
-webkit-appearance:none;
-webkit-border-radius:0;
Float:left;
line-height:35px;
Text-align:center;
Cursor:pointer;
}
. UL {
width:540px;
Height:auto;
Position:absolute;
top:37px;
left:0;
Display:none;
border:1px solid #b6b6b6;
}
. UL Li {
height:22px;
line-height:22px;
Color: #000;
font:14px Arial;
line-height:22px;
Cursor:default;
text-indent:9px;
}
. ul. High {
Background: #ccc;
}
</style>
<body>
<div class= "box" >
<span class= "SearchBox" id= "SearchBox" >
<input id= "Search" class= "search" type= "text" >
</span>
<span id= "btn" class= "BTN" > Baidu </span>
<ul id= "ul" class= "ul" >
<!--<li>12154</li>--
</ul>
</div>
<script src= "Jquery-1.11.2.min.js" ></script>
<!--<script src= "Http://code.jquery.com/jquery-1.12.0.min.js" ></script>-
<script>
var search = $ ("#search"),
UL = $ ("#ul"),
SearchBox = $ ("#searchBox"),
val = "",
index = 999;
var data = {
Bank: ["Bank of China", "China Construction Bank", "ICBC", "ABC", "China Merchants Bank", "China Communications Bank", "China Industrial Bank", "Chinese postal Bank", "CCB", "Swiss bank", "Beijing Bank", "Jiujiang Bank"]
};
Search.focus ();
Inputcolor ();
/* Input Box Border */
function Inputcolor () {
if (Search.is (": Focus")) {
Searchbox.css ({
"Border-color": "#4791ff transparent #4791ff #4791ff"
});
};
Search.on ("Blur", function () {
Searchbox.css ({
"Border-color": "#7b7b7b #b6b6b6 #b6b6b6 #7b7b7b"
});
});
};
/* List Border */
function Ulcolur () {
if (ul.is (": Visible")) {
Searchbox.css ({
"Border-color": "#4791ff Transparent transparent #4791ff"
});
} else {
Searchbox.css ({
"Border-color": "#4791ff transparent #4791ff #4791ff"
});
}
}
Rendlist ();
/* Render list */
function Rendlist () {
Search.on ("Input focus", function () {
var = $ (This),
html = "";
val = That.val ();
Ul.empty (). Show ();
if (val = = "") {
Ul.hide ();
}
Ulcolur ();
$.each (Data.bank, function (i, v) {
if (val = = v.substr (0, val.length)) {
html = ' <li> ' + val + ' <b> ' + v.substr (val.length) + ' </b></li> '
$ (HTML). APPENDTO (UL);
}
})
});
};
MouseMove ();
/* Mouse over list */
function MouseMove () {
Ul.on ("MouseOver", "Li", function () {
Index = $ (this). index ();
$ (this). AddClass ("High"). Siblings (). Removeclass ();
}). On ("Click", "Li", function () {
Search.val ($ (this). text ());
Ul.hide ();
}). On ("MouseLeave", function () {
index = 999;
$ (this). Find ("Li"). Removeclass ();
})
};
Clickdoc ();
/* Click Other areas to close the list */
function Clickdoc () {
$ (document). On ("click", Function (e) {
if (e.target.id = = "SearchBox" | | e.target.id = = "Search") {
return false;
} else {
Ul.hide ();
}
})
}
KeyCode ();
/* up/down keys */
function KeyCode () {
$ (document). KeyDown (function (event) {
Event = (Event | | window.event);
var max = ul.find ("Li"). Length-1;
if (index >= max | | Index < 1) {
Search.val (Val);
Ul.find ("Li"). Removeclass ("High");
}
if (Event.keycode = = 38) {//On
if (Index < 1) {
index = max + 2;
}
Ul.find ("Li"). EQ (index). addclass ("High"). Siblings (). Removeclass ("High");
Search.val (Ul.find ("Li"). EQ (index). Text () | | val);
index--;
return false;
} else if (Event.keycode = = 40) {//Down
if (Index > Max) {
Search.val (Val);
index =-1;
}
index++;
Ul.find ("Li"). EQ (index). addclass ("High"). Siblings (). Removeclass ("High");
Search.val (Ul.find ("Li"). EQ (index). Text () | | val);
};
});
}
</script>
</body>
Imitation Baidu Lenovo