2024年5月9日 星期四

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

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

2024-05-06

環境:Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19

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

https://github.com/prabirshrestha/chosen
https://github.com/prabirshrestha/chosen/tags
prabirshrestha 的 Chosen,目前最新1.2.0版,NuGet提供安裝

https://github.com/harvesthq/chosen
Harvesthq 的 Chosen,目前最新1.8.7版,NuGet不提供安裝

https://github.com/prabirshrestha/chosen/blob/master/LICENSE.md
授權 MIT






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



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

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>
    <script type="text/javascript"src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <%--<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>--%>
    <link href="Content/chosen.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/chosen.jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.chosen-select').chosen();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="ddlOptions" CssClass="chosen-select" runat="server">
                <asp:ListItem Text="Option 1" Value="1"></asp:ListItem>
                <asp:ListItem Text="Option 2" Value="2"></asp:ListItem>
                <asp:ListItem Text="Option 3" Value="3"></asp:ListItem>
                <asp:ListItem Text="Option 4" Value="4"></asp:ListItem>
                <asp:ListItem Text="Option 5" Value="5"></asp:ListItem>
            </asp:DropDownList>
        </div>
    </form>
</body>
</html>


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

兩者實際測試,都可以用。


(完)

相關

沒有留言:

張貼留言