JS imite l'invite de correspondance floue de la boîte déroulante automatique Baidu-js tutoriel-php.cn

JS imite l'invite de correspondance floue de la boîte déroulante automatique Baidu

高洛峰

Libérer： 2017-01-16 09:28:30

original

1643 Les gens l'ont consulté

JS imite linvite de correspondance floue de la boîte déroulante automatique Baidu

Dans les projets réels, nous pouvons changer l'acquisition de données en acquisition dynamique ajax, dans 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(&#39;addbg&#39;).eq(0).addClass(&#39;addbg&#39;);
}
} else if (keycode == 13) {
dojob();
}
});
var movePrev = function() {
$("#kw").blur();
var index = $(".addbg").prevAll().length;
if (index == 0) {
$(".item").removeClass(&#39;addbg&#39;).eq($(".item").length - 1).addClass(&#39;addbg&#39;);
} else {
$(".item").removeClass(&#39;addbg&#39;).eq(index - 1).addClass(&#39;addbg&#39;);
}
}
var moveNext = function() {
var index = $(".addbg").prevAll().length;
if (index == $(".item").length - 1) {
$(".item").removeClass(&#39;addbg&#39;).eq(0).addClass(&#39;addbg&#39;);
} else {
$(".item").removeClass(&#39;addbg&#39;).eq(index + 1).addClass(&#39;addbg&#39;);
}
}
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=&#39;item&#39; onmouseenter=&#39;getFocus(this)&#39; onClick=&#39;getCon(this);&#39;>" + 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>

Copier après la connexion

Ce qui précède est ce que l'éditeur vous présente Le JS imitation Baidu invite de correspondance floue de boîte déroulante automatique, j'espère que cela sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps !

Pour plus d'invites de correspondance floue de liste déroulante automatique JS imitant Baidu et d'articles connexes, veuillez faire attention au site Web PHP chinois !