Home > Developer > Web Develop
<!doctype html>
<meta charset= "Utf-8" >
<title>jquery Simple search Box-jq22.com</title>
<script src= "Http://libs.baidu.com/jquery/1.9.1/jquery.min.js" ></script>
<style>
* {
margin:0;
padding:0;
}
UL Li {
List-style:none;
}
A
Text-decoration:none;
}
. box {
width:600px;
}
. box1 {
width:300px;
Height:auto;
margin:30px 70px;
Float:left;
position:relative;
}
. box1. Inputcont {
width:200px;
height:36px;
line-height:36px;
Position:absolute;
top:0;
left:0;
}
. box1 #dynamicUl {
width:200px;
Height:auto;
BORDER:1PX solid yellow;
Position:absolute;
left:0;
top:40px;
}
. box1 #dynamicUl Li {
width:200px;
height:36px;
line-height:36px;
border-bottom:1px solid #ccc;
}
. box2 {
width:200px;
Height:auto;
Float:right;
margin-top:-30px;
}
. box2 #data {
width:200px;
Height:auto;
}
</style>
<body>
<div class= "box" >
<div class= "Box1" >
<input type= "text" placeholder= "Please enter phone number" class= "Inputcont" >
<ul id= "Dynamicul" >
</ul>
</div>
<div class= "Box2" >
<ul id= "Data" >
<li>1</li>
<li>22</li>
<li>123</li>
<li>13571</li>
<li>111</li>
</ul>
</div>
</div><script>
$ (function () {
var arr = [];
$ (' #data '). Children (). each (function () {
var Litext = $ (this). text ();
Arr.push (Litext);
});
$ ('. Inputcont '). On (' KeyUp ', function () {
$ (' #dynamicUl '). Find ("Li"). Remove ();
$ (' #dynamicUl '). Show ();
var Inputcont = $ ('. Inputcont '). Val ();
for (var i = 0; i < arr.length; i++) {
if ((Arr[i].indexof (inputcont))! =-1) {
$ (' #dynamicUl '). Append ($ (' <li onclick= "Removeul (This)" > ' + arr[i] + ' </li> '));
}
}
})
$ (' #dynamicUl '). On (' Click ', ' Li ', function () {
$ ('. Inputcont '). Val ($ (this). text ());
})
Removeul = function () {
$ (' #dynamicUl '). Hide ();
}
}) </script>
</body>
jquery Simple Search box
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
