<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type='text/css'>
#container{position:absolute;left:50%;top: 40%;}
#content{float:left;position:relative;right:50%;}
input{
border:2px solid gold;
288px;
height:30px;
font-size:16px;
padding:0 5px;
line-height:30px;
}
.item{
padding:3px 5px;
cursor:pointer;
}
.addbg{
background:#87A900;
}
.first{
border:solid #87A900 2px;
300px;
}
#append{
border:solid #87A900 2px;
border-top:0;
display:none;
position: relative;
z-index: 111;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<body>
<div id='container'>
<div id='content'>
<div class='first'><input id='kw' onKeyup='getContent(this);' onfocus='getContent(this);' /></div>
<div id='append'></div>
</div>
</div>
<script type='text/javascript'>
var data = [
'hello,你好',
'javascript',
'Python',
'xshell',
'css',
'html',
'百度地图',
'高德地图',
'nodejs',
'vuejs'
];
$(document).ready(function(){
$(document).keydown(function(e){
e = e || window.event;
var keycode = e.which ? e.which : e.keyCode;
if(keycode == 38){
if(jQuery.trim($('#append').html())==''){
return;
}
movePrev();
}else if(keycode == 40){
if(jQuery.trim($('#append').html())==''){
return;
}
$('#'+n).blur();
if($('.item').hasClass('addbg')){
moveNext();
}else{
$('.item').removeClass('addbg').eq(0).addClass('addbg');
}
}else if(keycode == 13){
dojob();
}
});
var movePrev = function(){
$('#'+n).blur();
var index = $('.addbg').prevAll().length;
if(index == 0){
$('.item').removeClass('addbg').eq($('.item').length-1).addClass('addbg');
}else{
$('.item').removeClass('addbg').eq(index-1).addClass('addbg');
}
}
var moveNext = function(){
var index = $('.addbg').prevAll().length;
if(index == $('.item').length-1){
$('.item').removeClass('addbg').eq(0).addClass('addbg');
}else{
$('.item').removeClass('addbg').eq(index+1).addClass('addbg');
}
};
var dojob = function(){
$('#'+n).blur();
var value = $('.addbg').text();
$('#'+n).val(value);
$('#append').hide().html('');
}
});
function getContent(obj){
var kw = jQuery.trim($(obj).val());
if(kw == ''){
$('#append').hide().html('');
return false;
}
console.log("输入的文字，若为时时调用接口获取，传入参数为kw")
console.log(kw)
var html = '';
for (var i = 0; i < data.length; i++) {
if (data[i].indexOf(kw) >= 0) {
html = html + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" + data[i] + "</div>"
}
}
if(html != ''){
$('#append').show().html(html);
}else{
$('#append').hide().html('');
}
}
function getFocus(obj){
$('.item').removeClass('addbg');
$(obj).addClass('addbg');
}
function getCon(obj){
// 点击搜索到的内容
var value = $(obj).text();
$('#kw').val(value);
$('#append').hide().html('');
}
</script>
</body>
</html>