<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>啦啦啦</title>
<style>
.search_box_wrapper{
position: relative;
width: 200px;
}
.search_input{
width: 200px;
height: 24px;
}
.search_box{
position: absolute;
top: 30px;
left: 0;
width: 202px;
border: 1px solid #CCCCCC;
border-top: 0px;
border-bottom: 0px;
background: #FFFFFF;
display: none;
}
.search_box_item{
width: 100%;
height: 24px;
line-height: 24px;
border-bottom: 1px solid #CCCCCC;
text-align: left;
display:block;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="search_box_wrapper">
<input id="searchInput" class="search_input" type="text" placeholder="请输入搜索内容"/>
<div class="search_box">
<span class="search_box_item" onclick='itemPick(this)'>11111</span>
<span class="search_box_item" onclick='itemPick(this)'>2222</span>
<span class="search_box_item" onclick='itemPick(this)'>333</span>
<span class="search_box_item" onclick='itemPick(this)'>444</span>
<span class="search_box_item" onclick='itemPick(this)'>555</span>
<span class="search_box_item" onclick='itemPick(this)'>11166611</span>
</div>
</div>
<script src="//cdn.bootcss.com/jquery/1.12.0/jquery.min.js"></script>
<script>
$(".search_box_wrapper").hover(function(){
$(".search_box").show();
},function(){
$(".search_box").hide();
})
$('#searchInput').on('input',function(){ //谷歌内核
contactSearch();
})
$('#searchInput').on('propertychange',function(){ //IE内核
contactSearch();
});
var data = ["马化腾","马云","马三立","马上"];
function contactSearch() {
$('.search_box').html("");
var con = $('#searchInput').val();
// $.ajax({
// type:"post",
// url:"*******************",//请求接口
// dataType:"json",
// data : {
// "data":con
// },
// success:function(data){
var html = "";
for (var i = 0; i < data.length; i++) {
html += "<span class='search_box_item' onclick='itemPick(this)'>" + data[i] + "</span>";
}
$(".search_box").append(html);
// }
// });
}
function itemPick(obj){
$("#searchInput").val($(obj).text());
$(".search_box").hide();
}
</script>
</body>
</html>
|
管理
