[研究]ASP.NET WebForm 的 chosen 1.8.7、 chosen.jquery 1.8.7範例
2023-04-02
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#
Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes
Chosen (v1.8.7)
https://harvesthq.github.io/chosen/
除了GitHub上官方網站有持續更新，在NuGet上並沒有持續更新(除了 MVC)。
NuGet Gallery | chosen 1.2.0
https://www.nuget.org/packages/chosen
https://github.com/prabirshrestha/chosen
需要 jQuery support: 1.4+ 和 Prototype support: 1.7+
chosen.jquery 1.2.0
https://www.nuget.org/packages/chosen.jquery
Harvest.Chosen 1.4.2
https://www.nuget.org/packages/Harvest.Chosen
jquery.chosen.mvc 1.8.7
https://www.nuget.org/packages/jquery.chosen.mvc
********************************************************************************
Chosen 是一個可以用來改善表單選擇器（select）的外觀和功能的 JavaScript 庫。在 ASP.NET WebForm 中使用 Chosen 非常簡單，只需要在表單中引入 Chosen 的 CSS 和 JavaScript 文件，然後在需要使用的 select 元素上加上 chosen-select class 即可。
以下是一個簡單的範例，展示了如何在 ASP.NET WebForm 中使用 Chosen 1.2.0：
<!DOCTYPE html>
<html>
<head>
<title>Chosen Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" />
</head>
<body>
<form id="myForm" runat="server">
<select id="mySelect" class="chosen-select">
<option value=""></option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.chosen-select').chosen();
});
</script>
</body>
</html>
|
範例2：
<!DOCTYPE html>
<html>
<head>
<title>Chosen Example with Keyword Filter</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" />
</head>
<body>
<form id="myForm" runat="server">
<select id="mySelect" class="chosen-select" data-placeholder="Select an option...">
<option value=""></option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.chosen-select').chosen({
no_results_text: "Oops, nothing found!",
width: "100%",
search_contains: true
});
});
</script>
</body>
</html>
|
在這個範例中，我們使用了 search_contains: true 選項來啟用 Chosen 的關鍵字過濾功能。當使用者在選項中輸入關鍵字時，選項會自動過濾，只顯示與關鍵字匹配的選項。
此外，我們還使用了 no_results_text 選項來設置當沒有符合關鍵字的選項時要顯示的文字。
注意：Chosen 的關鍵字過濾功能僅在 search_contains 設置為 true 時才會啟用。另外，如果你想要讓關鍵字過濾更加精確，可以將 search_contains 設置為 false，這樣 Chosen 將只匹配以關鍵字開頭的選項。
(完)
相關
[研究]chosen.jquery, select2, Selectize 差別？年代？優點？缺點？
https://shaurong.blogspot.com/2023/04/chosenjquery-select2-selectize.html
[研究]ASP.NET WebForm 的 chosen 1.8.7、 chosen.jquery 1.8.7範例https://shaurong.blogspot.com/2023/04/aspnet-webform-chosen-187-chosenjquery.html
[研究][ASP.NET]MasterPage中ContentPlaceHolder內的 JavaScript「顯示密碼」功能
[研究][ASP.NET]JavaScript 抓取 ContentPlaceHolder 中 ASP.NET 控制項的 ID
https://shaurong.blogspot.com/2022/04/aspnetmasterpagecontentplaceholder.html
[研究][ASP.NET]Select2 v4.0.3 關鍵字即時過濾下拉選單(二)各種ID存取狀況
https://shaurong.blogspot.com/2022/05/aspnetselect2-v403-id.html
[研究][ASP.NET]Select2 v4.0.3 關鍵字即時過濾下拉選單(一)初次試用
http://shaurong.blogspot.com/2017/01/caspnet-select2-v403-jquery-plugin.html
沒有留言:
張貼留言