jQuery搜索框，输入文字键盘抬起，显示返回值列表
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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: 242px;
position: absolute;
left: 16px;
top: 71px;
z-index: 1;
overflow: hidden;
background: #dcf6f8;
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="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group staffContainer">
<label class="col-md-2 col-sm-2 col-xs-2 control-label">员工选择 </label>
<div class="col-md-5 col-sm-5 col-xs-5">
<input type="text" class="form-control search" id="staffName" placeholder="请输入工号" autocomplete="off">
</div>
</div>
</div>
</div>
<!-- 搜索按钮 -->
<div id="search_result" class=" "></div>
</body>
<script type="text/javascript">
//查询
$(".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;
}
$.ajax({
url: "data.json",
type: "get",
success: function(data) {
if (data != '') {
var laver;
laver = "<table id='ret'>";
for (var i = 0; i < data.length; i++) {
laver += "<tr id='sel'><td class='line'>";
laver += "<span class='personid'>" + data[i].deviceId + "</span>";
laver += "<span class='personname'>" + data[i].name + "</span>";
laver += "<span class='personsex'>" + data[i].sex + "</span>";
laver += "<span class='personorganid'>" + data[i].organId + "</span>";
laver += "<span class='personorganname'>" + data[i].organName + "</span></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).children(".personname").text());
$('#staffDeviceId').val($(this).children(".personid").text());
$("#sex").val($(this).children(".personsex").text());
var a = $(this).children(".personorganname").text();
$("#organId").val($(this).children(".personorganid").text())
$("#organName").html('<option selected="selected" value="">' + a + '</option>');
$('#search_result').empty();
//search();
})
} else {
$('#search_result').empty();
$('#search_result').css('display', 'none');
}
}
});
});
// enter键盘事件
var currentLine = 0;
$(".search").keydown(function(event) {
if (event.keyCode == 13) {
var key = $(".hover").html();
if (key != null && key != '') {
$(this).val(key);
}
currentLine = 0;
/* search(); */
}
if (event.keyCode == 38) {
currentLine--;
changeItem();
}
if (event.keyCode == 40) {
currentLine++;
changeItem();
}
});
// 方向盘调用的事件
function changeItem() {
$('.line').removeClass('hover');
if (currentLine < 0) {
currentLine = $("#ret .line").length - 1;
}
if (currentLine == $("#ret .line").length) {
currentLine = 0;
}
$(".line:eq(" + currentLine + ")").addClass('hover');
}
</script>
</html>模拟的json数据
[{
"organName": "22物联",
"sex": 1,
"name": "DDDDD",
"organId": 1,
"deviceId": "DDDD"
}, {
"organName": "技术部",
"sex": 1,
"name": "手环测试",
"organId": 134,
"deviceId": "EAFA6CCF3CDD1"
}, {
"organName": "物联",
"sex": 1,
"name": "测试9873",
"organId": 1,
"deviceId": "DFB55ECE9873"
}, {
"organName": "办公室",
"sex": 1,
"name": "测试5B32",
"organId": 134,
"deviceId": "DA4F98E95B32"
}, {
"organName": "11化工厂",
"sex": 1,
"name": "7890",
"organId": 1,
"deviceId": "68907"
}, {
"organName": "fd物联",
"sex": 0,
"name": "测试12",
"organId": 1,
"deviceId": "DDDDDEEEEEEE"
}, {
"organName": "fdf化工厂",
"sex": 1,
"name": "7890111",
"organId": 1,
"deviceId": "C03DC5A284D6"
}, {
"organName": "fdfdf化工厂",
"sex": 1,
"name": "7890",
"organId": 1,
"deviceId": "E4682C45D19C"
}, {
"organName": "会议部",
"sex": 1,
"name": "李71DC",
"organId": 143,
"deviceId": "D98A29DE71DC"
}]效果如下：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读