[研究]ASP.NET,WebForm,試用 Selectize.js 0.12.1 套件，下拉選單關鍵字過濾顯示
2024-05-06
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19
********************************************************************************
https://github.com/selectize/selectize.js
授權 Apache-2.0
GitHub 上最新0.15.2，但 NuGet 上最新 0.12.1
https://github.com/selectize/selectize.js/releases
雖然沒有顯示相依 jQuery 套件，實際測試需要。
另外 selectize.min.js 必須使用 standalone 版本才行。
********************************************************************************
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"
Inherits="WebApplication1.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="Content/Selectize/css/selectize.css" rel="stylesheet" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="Content/Selectize/js/standalone/selectize.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList ID="DropDownList1" runat="server" Width="100px">
<asp:ListItem Text="--請選擇--" Value=""></asp:ListItem>
<asp:ListItem Text="選項1" Value="1"></asp:ListItem>
<asp:ListItem Text="選項2" Value="2"></asp:ListItem>
<asp:ListItem Text="選項3" Value="3"></asp:ListItem>
<asp:ListItem Text="選項4" Value="4"></asp:ListItem>
</asp:DropDownList>
<br />
<asp:DropDownList ID="DropDownList2" runat="server" Width="100px">
<asp:ListItem Text="--請選擇--" Value=""></asp:ListItem>
<asp:ListItem Text="選項1" Value="1"></asp:ListItem>
<asp:ListItem Text="選項2" Value="2"></asp:ListItem>
<asp:ListItem Text="選項3" Value="3"></asp:ListItem>
<asp:ListItem Text="選項4" Value="4"></asp:ListItem>
</asp:DropDownList>
</form>
<script type="text/javascript">
$(document).ready(function () {
// 使用 Selectize.js 初始化 DropDownList
$('#<%= DropDownList1.ClientID %>').selectize({
create: false, // 禁止創建新選項
sortField: 'text', // 按文本排序
searchField: ['text'], // 搜索字段為文本
dropdownParent: 'body' // 下拉框父元素
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%= DropDownList2.ClientID %>').selectize();
});
</script>
</body>
</html>
|
********************************************************************************
改用 CssClass 方式執行會失敗
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default2.aspx.cs"
Inherits="WebApplication1.Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="Content/Selectize/css/selectize.css" rel="stylesheet" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="Content/Selectize/js/standalone/selectize.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.selectize-input').selectize();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="selectize-input" Width="150px">
<asp:ListItem Text="--請選擇--" Value=""></asp:ListItem>
<asp:ListItem Text="選項1" Value="1"></asp:ListItem>
<asp:ListItem Text="選項2" Value="2"></asp:ListItem>
<asp:ListItem Text="選項3" Value="3"></asp:ListItem>
<asp:ListItem Text="選項4" Value="4"></asp:ListItem>
</asp:DropDownList>
</form>
</body>
</html>
|
********************************************************************************
改用 CssClass 方式執行成功，可能 CssClass 的名稱不能有減號
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default2.aspx.cs"
Inherits="WebApplication1.Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="Content/Selectize/css/selectize.css" rel="stylesheet" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="Content/Selectize/js/standalone/selectize.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.selectizeCss').selectize();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="selectizeCss" Width="150px">
<asp:ListItem Text="--請選擇--" Value=""></asp:ListItem>
<asp:ListItem Text="選項1" Value="1"></asp:ListItem>
<asp:ListItem Text="選項2" Value="2"></asp:ListItem>
<asp:ListItem Text="選項3" Value="3"></asp:ListItem>
<asp:ListItem Text="選項4" Value="4"></asp:ListItem>
</asp:DropDownList>
</form>
</body>
</html>
|
********************************************************************************
********************************************************************************
但2024-05-21補
[研究]ASP.NET, 套件 Select2.js 4.0.13 與 selectize 0.12.1 共存測試https://shaurong.blogspot.com/2024/05/aspnet-select2js-4013-selectize-0121.html
selectize 套件至少要有一個選項，不是靠 DataSourceID 選出來的，否則會沒有「關鍵字過濾」功能。例如下面：
<asp:DropDownList ID="DropDownList2" Width="150px" runat="server" AutoPostBack="True"
AppendDataBoundItems="True"
DataSourceID="SqlDataSource1" DataTextField="Fruit" DataValueField="Fruit">
<asp:ListItem Text="--請選擇--" Value=""></asp:ListItem>
</asp:DropDownList>
|
********************************************************************************
(完)
相關
