JS仿百度自動(dòng)下拉框模糊匹配提示
更新時(shí)間：2016年07月25日 10:03:45 作者：WoodK
這篇文章主要介紹了JS仿百度自動(dòng)下拉框模糊匹配提示 的相關(guān)資料,需要的朋友可以參考下
實(shí)際項(xiàng)目中，我們可以把數(shù)據(jù)獲取改成ajax動(dòng)態(tài)獲取，在 getContent()中
<!DOCTYPE>
<html>
<head>
<title>js/jQuery實(shí)現(xiàn)類似百度搜索功能</title>
<meta name="Author" content="Michael">
<meta name="Keywords" content="js/jQuery實(shí)現(xiàn)類似百度搜索功能">
<meta name="Description" content="js/jQuery實(shí)現(xiàn)類似百度搜索功能,可用鍵盤控制">
<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仿百度自動(dòng)下拉框模糊匹配提示，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
您可能感興趣的文章:
- js輸入框郵箱自動(dòng)提示功能代碼實(shí)現(xiàn)
- 仿新浪微博登陸郵箱提示效果的js代碼
- JavaScript輸入郵箱自動(dòng)提示實(shí)例代碼
- 一個(gè)仿微博登陸郵箱提示框js開發(fā)案例
- JS實(shí)現(xiàn)提交表單前的數(shù)字及郵箱校檢功能
- js仿QQ郵箱收件人選擇與搜索功能
- JavaScript實(shí)現(xiàn)郵箱地址自動(dòng)匹配功能代碼
- JavaScript 文本框下拉提示(自動(dòng)提示)
- javascript實(shí)現(xiàn)下拉提示選擇框
- javascript仿百度輸入框提示自動(dòng)下拉補(bǔ)全
- JS實(shí)現(xiàn)的郵箱提示補(bǔ)全效果示例
相關(guān)文章
js實(shí)現(xiàn)繼承的方法及優(yōu)缺點(diǎn)總結(jié)
這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)繼承的方法及優(yōu)缺點(diǎn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了layui導(dǎo)航欄二級(jí)菜單不顯示問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)單選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
JavaScript實(shí)現(xiàn)頁面無操作倒計(jì)時(shí)退出
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)頁面無操作倒計(jì)時(shí)退出,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
JavaScript實(shí)現(xiàn)算術(shù)平方根算法-代碼超簡單
實(shí)現(xiàn)算術(shù)平方根的方法有很多種，本文是通過JavaScript實(shí)現(xiàn)的算術(shù)平方根算法，代碼超簡單，超管用，感興趣的朋友跟著腳本之家的小編一起學(xué)習(xí)吧2015-09-09
這篇文章主要介紹了十分鐘教你上手ES2020新特性，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
項(xiàng)目需要做了如下的東西，希望能給其他需要的同學(xué)們一點(diǎn)參考。2010-08-08
JavaScript數(shù)組reduce()方法的語法與實(shí)例解析
js函數(shù)中有三個(gè)在特定場合很好用的函數(shù):reduce(),map(),filter(),這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組reduce()方法的相關(guān)資料,需要的朋友可以參考下2021-07-07
深入淺出webpack教程系列_安裝與基本打包用法和命令參數(shù)詳解
下面小編就為大家?guī)硪黄钊霚\出webpack教程系列_安裝與基本打包用法和命令參數(shù)詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就想給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序ibeacon三點(diǎn)定位的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10