suchen

Heim  >  Artikel  >  Web-Frontend  >  JS imitiert die automatische Dropdown-Box-Fuzzy-Matching-Eingabeaufforderung von Baidu

JS imitiert die automatische Dropdown-Box-Fuzzy-Matching-Eingabeaufforderung von Baidu

高洛峰
高洛峰Original
2017-01-16 09:28:301624Durchsuche

JS imitiert die automatische Dropdown-Box-Fuzzy-Matching-Eingabeaufforderung von Baidu

In tatsächlichen Projekten können wir die Datenerfassung in getContent() auf dynamische Ajax-Erfassung umstellen 

<!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>

Das Obige ist, was der Editor Ihnen vorstellt Der JS Nachahmung der automatischen Dropdown-Box-Fuzzy-Matching-Eingabeaufforderung von Baidu. Ich hoffe, dass sie für alle hilfreich ist. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht, und der Herausgeber wird Ihnen rechtzeitig antworten!

Weitere JS-Imitationen von automatischen Fuzzy-Matching-Eingabeaufforderungen für Baidu-Dropdown-Boxen und verwandte Artikel finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Überprüfung der js-PasswortstärkeNächster Artikel：Überprüfung der js-Passwortstärke

In Verbindung stehende Artikel

Mehr sehen