浮雲雅築: [研究]ASP.NET,WebForm,試用 Selectize.js 0.12.1 套件，下拉選單關鍵字過濾顯示

[研究]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>

********************************************************************************

(完)

相關

浮雲雅築

2024年5月8日星期三

[研究]ASP.NET,WebForm,試用 Selectize.js 0.12.1 套件，下拉選單關鍵字過濾顯示

沒有留言:

張貼留言

2024年5月8日 星期三

[研究]ASP.NET,WebForm,試用 Selectize.js 0.12.1 套件，下拉選單關鍵字過濾顯示

沒有留言:

張貼留言

2024年5月8日星期三