JS仿百度自动下拉框模糊匹配提示

前端技术 2023/09/08 JavaScript

实际项目中，我们可以把数据获取改成ajax动态获取，在 getContent()中

<!DOCTYPE>
<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://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js\"></script>
<style type=\"text/css\">
#container {
position: absolute;
left: 50%;
top: 40%;
}
#content {
float: left;
position: relative;
right: 50%;
}
input {
border: 0;
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;
}
</style>
</head>
<body>
<div id=\"container\">
<div id=\"content\">
<div class=\"first\">
<input id=\"kw\" onKeyup=\"getContent(this);\" />
</div>
<div id=\"append\"></div>
</div>
</div>
<script type=\"text/javascript\">
var data = [
\"你好，我是Michael\",
\"你是谁\",
\"你最好啦\",
\"你最珍贵\",
\"你是我最好的朋友\",
\"你画我猜\",
\"你是笨蛋\",
\"你懂得\",
\"你为我着迷\",
\"你是我的眼\"
];
$(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;
}
$(\"#kw\").blur();
if ($(\".item\").hasClass(\"addbg\")) {
moveNext();
} else {
$(\".item\").removeClass(\'addbg\').eq(0).addClass(\'addbg\');
}
} else if (keycode == 13) {
dojob();
}
});
var movePrev = function() {
$(\"#kw\").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() {
$(\"#kw\").blur();
var value = $(\".addbg\").text();
$(\"#kw\").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\' 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>

以上所述是小编给大家介绍的JS仿百度自动下拉框模糊匹配提示，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

本文地址：https://www.stayed.cn/item/21649

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案