<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul,li{
margin:0;
padding:0;
border:none;
list-style:none;
}
li{
font-size:13px;
height:25px;
}
#test{
border:1px solid #c5c5c3;
width:200px;
cursor:pointer;
overflow-y:auto;
max-height:200px;
}
#search{
height:25px;
border-radius:5px;
width:198px;
font-size:13px;
}
#down{
max-height:200px;
}
li:hover{backgroud:#41ddf9}
</style>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script type="text/javascript">
var array=[1,2,3,4,5,6,7,8];
$(function(){
$("#text").css("display","none");
$("#search").keyup(function(){
$("#down").html("");
if(array!=null||array.length>0){
for(var i=0;i<array.length;i++){
$("#down").append("<li title='testappend' id='"+array[i]+"' οnclick='clickme(this)'>"+array[i]+"</li>");
}
}
var temp=$("#down").find("li");
if(temp.length==0){
$("#test").css("display","none");
}else{
$("#test").css("display","block");
}
});
var hideDiv=document.getElementById("test");
document.addEventListener("click",function(){
hideDiv.style.display="none";
});
hideDiv.addEventListener("click",function(event){
event=event||window.event;
event.stopPropagation();
});
});
function clickme(obj){
$("#search").val($("#"+obj.id).text());
$("#test").css("display","none");
}
function hide(){
$("#test").css("display",none);
}
</script>
</head>
<body>
<div id="mainDiv" style="width:220px;">
<input type="text" id="search">
<div id="test">
<ul id="down">
</ul>
</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul,li{
margin:0;
padding:0;
border:none;
list-style:none;
}
li{
font-size:13px;
height:25px;
}
#test{
border:1px solid #c5c5c3;
width:200px;
cursor:pointer;
overflow-y:auto;
max-height:200px;
}
#search{
height:25px;
border-radius:5px;
width:198px;
font-size:13px;
}
#down{
max-height:200px;
}
li:hover{backgroud:#41ddf9}
</style>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script type="text/javascript">
var array=[1,2,3,4,5,6,7,8];
$(function(){
$("#text").css("display","none");
$("#search").keyup(function(){
$("#down").html("");
if(array!=null||array.length>0){
for(var i=0;i<array.length;i++){
$("#down").append("<li title='testappend' id='"+array[i]+"' οnclick='clickme(this)'>"+array[i]+"</li>");
}
}
var temp=$("#down").find("li");
if(temp.length==0){
$("#test").css("display","none");
}else{
$("#test").css("display","block");
}
});
var hideDiv=document.getElementById("test");
document.addEventListener("click",function(){
hideDiv.style.display="none";
});
hideDiv.addEventListener("click",function(event){
event=event||window.event;
event.stopPropagation();
});
});
function clickme(obj){
$("#search").val($("#"+obj.id).text());
$("#test").css("display","none");
}
function hide(){
$("#test").css("display",none);
}
</script>
</head>
<body>
<div id="mainDiv" style="width:220px;">
<input type="text" id="search">
<div id="test">
<ul id="down">
</ul>
</div>
</div>
</body>
</html>
1326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
