JS实现自动补全功能

最新推荐文章于 2021-03-01 11:02:34 发布

being_0008

最新推荐文章于 2021-03-01 11:02:34 发布

阅读量3.4k

点赞数 1

分类专栏： JavaScript 文章标签： web前端 javascript 前端开发

本文链接：https://blog.csdn.net/Ymm_0008/article/details/72654687

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

来个直接暴力的吧，废话不说了。直接上代码了。

写的可能有问题，希望大家能够指出，大神勿喷。。。

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
<title>js/jQuery实现类似百度搜索功能</title>
<meta name='Author' content='Michael'>
<meta name='Keywords' content='js/jQuery实现类似百度搜索功能'>
<meta name='Description' content='js/jQuery实现类似百度搜索功能,可用键盘控制'>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<style type='text/css'>
#container{
position:absolute;
left:50%;
top: 40%;
}
#content{
float:left;
position:relative;
right:50%;
}
input{
border:2px solid gold;
width: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;
width:300px;
}
#append{
border:solid #87A900 2px;
border-top:0;
display:none;
position: relative;
z-index: 111;
}
</style>
</head>
<body>
<div id='container'>
<div id='content'>
<div class='first'><input id='kw' onKeyup='getContent(this);' οnfοcus='getContent(this);' /></div>
<div id='append'></div>
</div>
</div>
</body>
</html>

<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;
}
var html = '';
for (var i = 0; i < data.length; i++) {
if (data[i].indexOf(kw) >= 0) {
html = html + "<div class='item' οnmοuseenter='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();
$('#'+n).val(value);
$('#append').hide().html('');
}
</script>