溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了怎么用jQuery實現HTML頁面文本框模糊匹配查詢功能的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇怎么用jQuery實現HTML頁面文本框模糊匹配查詢功能文章都會有所收獲，下面我們一起來看看吧。
可看到如下效果展示圖：
接下來是代碼，純html+css+jquery的：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>www.jb51.net jQuery模糊匹配查詢</title>
<style type="text/css">
#div_main {
margin: 0 auto;
width: 300px;
height: 400px;
border: 1px solid black;
margin-top: 50px;
}
#div_txt {
position: relative;
width: 200px;
margin: 0 auto;
margin-top: 40px;
}
#txt1 {
width: 99%;
}
#div_items {
position: relative;
width: 100%;
height: 200px;
border: 1px solid #66afe9;
border-top: 0px;
overflow: auto;
display: none;
}
.div_item {
width: 100%;
height: 20px;
margin-top: 1px;
font-size: 13px;
line-height: 20px;
}
</style>
</head>
<body>
<div id="div_main">
<!--表單的autocomplete="off"屬性設置可以阻止瀏覽器默認的提示框-->
<form autocomplete="off">
<div id="div_txt">
<!--要模糊匹配的文本框-->
<input type="text" id="txt1" />
<!--模糊匹配窗口-->
<div id="div_items">
<div class="div_item">周杰倫</div>
<div class="div_item">周杰</div>
<div class="div_item">林俊杰</div>
<div class="div_item">林宥嘉</div>
<div class="div_item">林妙可</div>
<div class="div_item">唐嫣</div>
<div class="div_item">唐家三少</div>
<div class="div_item">唐朝盛世</div>
<div class="div_item">奧迪A4L</div>
<div class="div_item">奧迪A6L</div>
<div class="div_item">奧迪A8L</div>
<div class="div_item">奧迪R8</div>
<div class="div_item">寶馬GT</div>
</div>
</div>
</form>
</div>
</body>
</html>
<script type="text/javascript">
//彈出列表框
$("#txt1").click(function () {
$("#div_items").css('display', 'block');
return false;
});
//隱藏列表框
$("body").click(function () {
$("#div_items").css('display', 'none');
});
//移入移出效果
$(".div_item").hover(function () {
$(this).css('background-color', '#1C86EE').css('color', 'white');
}, function () {
$(this).css('background-color', 'white').css('color', 'black');
});
//文本框輸入
$("#txt1").keyup(function () {
$("#div_items").css('display', 'block');//只要輸入就顯示列表框
if ($("#txt1").val().length <= 0) {
$(".div_item").css('display', 'block');//如果什么都沒填，跳出，保持全部顯示狀態
return;
}
$(".div_item").css('display', 'none');//如果填了，先將所有的選項隱藏
for (var i = 0; i < $(".div_item").length; i++) {
//模糊匹配，將所有匹配項顯示
if ($(".div_item").eq(i).text().substr(0, $("#txt1").val().length) == $("#txt1").val()) {
$(".div_item").eq(i).css('display', 'block');
}
}
});
//項點擊
$(".div_item").click(function () {
$("#txt1").val($(this).text());
});
</script>關于“怎么用jQuery實現HTML頁面文本框模糊匹配查詢功能”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“怎么用jQuery實現HTML頁面文本框模糊匹配查詢功能”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
