|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
jQuery實(shí)現(xiàn)帶有搜索框的下拉列表
作者:admin 時(shí)間:2021-8-4 10:51:55 瀏覽:搜索是 HTML 下拉列表的一項(xiàng)有用功能。尤其是從具有長(zhǎng)列表的下拉列表中選擇項(xiàng)目將增加用戶的便利性。
在本教程中，我們將列出帶有搜索選項(xiàng)的國(guó)家/地區(qū)下拉列表。
在本教程中，我們有一個(gè) Javascript 數(shù)組中的項(xiàng)目列表。我們使用 jQuery select2 庫來提供這些列表并通過搜索顯示下拉列表。
jQuery實(shí)現(xiàn)帶有搜索框的下拉列表
帶有搜索功能的 jQuery 下拉列表
此代碼包含一個(gè)由其 id 引用的 HTML select 元素。使用此 id 引用，它會(huì)調(diào)用 select2 函數(shù)以顯示帶有搜索框的下拉列表。
帶有搜索框的下拉列表
在調(diào)用此函數(shù)時(shí)，我們將一個(gè)國(guó)家列表數(shù)組傳遞給目標(biāo)下拉元素。
完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<TITLE>帶有搜索功能的下拉列表</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index,follow">
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<link href="css/select2.min.css" rel="stylesheet" />
<script src="js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var country = ["Australia", "Bangladesh", "Denmark", "China", "Indonesia", "Netherlands", "New Zealand", "South Africa"];
$("#country").select2({
data: country
});
});
</script>
<style type="text/css">
body {
font-family: -apple-system, BlinkMacSystemFont, Roboto, Segoe UI,
Helvetica Neue, Helvetica, Arial, sans-serif;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
color: #2f2f2f;
}
#demo-content {
margin: 30px 30px;
padding: 30px 30px;
width: 800px;
height: 600px;
background: #e1e1e1;
}
</style>
</head>
<body>
<div id="demo-content">
<h1>帶有搜索功能的下拉列表</h1>
<div>
<select id="country" style="width:300px;">
</select>
</div>
</div>
</body>
</html>
我們還可以將遠(yuǎn)程數(shù)據(jù)從數(shù)據(jù)庫或任何其他數(shù)據(jù)源動(dòng)態(tài)傳遞到下拉列表。
當(dāng)在搜索框里輸入某個(gè)字符時(shí)，會(huì)即時(shí)自動(dòng)顯示相關(guān)的選項(xiàng)。
總結(jié)
本文介紹了使用jQuery實(shí)現(xiàn)帶有搜索框的下拉列表，另外，我之前也介紹過同樣很有趣的下拉列表設(shè)計(jì)，jQuery實(shí)例：帶有復(fù)選框的下拉列表。
標(biāo)簽: 下拉列表
相關(guān)文章
x
- 站長(zhǎng)推薦
