input输入框输入数据查询
在input输入框输入数字的时候，会展示data.json里面的数据，当删掉input输入框输入数字的时候，隐藏出现的data.json数据列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<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, "");
// 如果空、清空结果框
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","安琪拉"]原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.07.29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读