在input輸入框輸入數(shù)字的時(shí)候溉潭，會(huì)展示data.json里面的數(shù)據(jù)抱完，當(dāng)刪掉input輸入框輸入數(shù)字的時(shí)候狗热，隱藏出現(xiàn)的data.json數(shù)據(jù)列表卖宠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" >
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#search_result {
width: 197px;
position: absolute;
left: 17px;
top: 48px;
z-index: 1;
overflow: hidden;
background: #dcf6f8;
border: #c5dadb 1px solid;
border-top: none;
}
.line {
font-size: 12px;
color: #000;
background: #ffffff;
width: 302px;
height: 30px;
padding: 2px;
}
.hover {
background: #007ab8;
color: #fff;
}
</style>
</head>
<body>
<div class="col-md-3 col-xs-3">
<div class="row">
<div class="form-group" style="margin-top: 10px;">
<div class="col-sm-12">
<input id="search" type="text" class="form-control input-medium" placeholder="姓名" />
</div>
</div>
</div>
<div id="search_result" class=" "></div>
</div>
</body>
<script>
$(function() {
/** 搜索模塊 */
$("#search").keyup(
function(event) {
// 獲取值
var str = $("#search").val();
// 去空格
str = str.replace(/\s+/g, "");
// 如果空、清空結(jié)果框
if(str == '') {
$('#search_result').empty();
$('#search_result').css('display', 'none');
return;
}
// 去除特殊符號
var key = str.replace("'", "")
// 如果是enter鍵坪稽、上下鍵返回
if(event.keyCode == 13 || event.keyCode == 38 ||
event.keyCode == 40) {
return;
}
// 清空deviceId
$("#did").val("");
$.ajax({
url: "data.json",
type: "get",
success: function(data) {
/*alert(JSON.stringify(data))*/
if(data != '') {
var laver;
laver = "<table id='ret'>";
for(var i = 0; i < data.length; i++) {
laver += "<tr id='sel'><td class='line'>" +
data[i] + "</td></tr>";
}
laver += "</table>";
$('#search_result').empty();
$('#search_result').html(laver);
$('.line:first').addClass('hover');
$('#search_result').css('display', '');
$('.line').hover(function() {
$('.line').removeClass('hover');
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$('.line').click(function() {
$('#search').val($(this).text());
$('#search_result').empty();
search();
})
} else {
$('#search_result').empty();
$('#search_result').css('display', 'none');
}
}
});
});
})
</script>
</html>
data.json
["亞瑟王","典韋","123","亞瑟二號","安琪拉一號","典韋2","安琪拉"]
原文作者：祈澈姑娘 技術(shù)博客：http://www.reibang.com/u/05f416aefbe1
90后前端妹子曼玩，愛編程，愛運(yùn)營刽漂，文藝與代碼齊飛演训，魅力與智慧共存的程序媛一枚弟孟。
