توضیحات و دانلود

استفاده از جاوا اسکریپت برای فیلتر و جستجو کردن موارد DropDownListبا ASP.Net
0 0
استفاده از جاوا اسکریپت برای فیلتر و جستجو کردن موارد DropDownListبا ASP.Net

با سلام این یک مقاله کوتاه است که توضیح میدهد چگونه با استفاده از جاوا اسکریپت اشیاء کنترل ASP.NET DropDownList را جستجو و فیلتر کنید. بنابراین با استفاده از این مقاله، کاربر می تواند با جاوا اسکریپت بدون استفاده از درخواست های PostBack یا AJAX از طریق آیتم Croplient آیتم های DropDownList را جستجو کند.

کد HTML

<div>

    <asp:TextBox ID="txtSearch" runat="server"

         onkeyup = "FilterItems(this.value)"></asp:TextBox><br />

    <asp:DropDownList ID="ddlItems" runat="server" >

        <asp:ListItem Text="Mango" Value="1"></asp:ListItem>

        <asp:ListItem Text="Orange" Value="2"></asp:ListItem>

        <asp:ListItem Text="Apple" Value="3"></asp:ListItem>

        <asp:ListItem Text="Banana" Value="4"></asp:ListItem>

        <asp:ListItem Text="Water Melon" Value="5"></asp:ListItem>

        <asp:ListItem Text="Lemon" Value="6"></asp:ListItem>

        <asp:ListItem Text="Pineapple" Value="7"></asp:ListItem>

        <asp:ListItem Text="Papaya" Value="8"></asp:ListItem>

        <asp:ListItem Text="Chickoo" Value="9"></asp:ListItem>

        <asp:ListItem Text="Apricot" Value="10"></asp:ListItem>

        <asp:ListItem Text="Grapes" Value="11"></asp:ListItem>

        <asp:ListItem Text="Olive" Value="12"></asp:ListItem>

        <asp:ListItem Text="Guava" Value="13"></asp:ListItem>

        <asp:ListItem Text="Sweet Lime" Value="14"></asp:ListItem>

    </asp:DropDownList>

    <br />

    <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>

</div>

در بالا شما متوجه خواهید شد که سه کنترل  TextBox، DropDownList و  برچسب وجود دارد. بر اساس متن تایپ شده در TextBox موجود در DropDownList فیلتر می شوند. در حالی که برچسب پیام وضعیت را به کاربر نمایش می دهد

فیلتر کردن آیتم های DropDownList ASP.Net

<script type = "text/javascript">

    var ddlText, ddlValue, ddl, lblMesg;

    function CacheItems() {

        ddlText = new Array();

        ddlValue = new Array();

        ddl = document.getElementById("<%=ddlItems.ClientID %>");

        lblMesg = document.getElementById("<%=lblMessage.ClientID%>");

        for (var i = 0; i < ddl.options.length; i++) {

            ddlText[ddlText.length] = ddl.options[i].text;

            ddlValue[ddlValue.length] = ddl.options[i].value;

        }

    }

    window.onload = CacheItems;

   

    function FilterItems(value) {

        ddl.options.length = 0;

        for (var i = 0; i < ddlText.length; i++) {

            if (ddlText[i].toLowerCase().indexOf(value) != -1) {

                AddItem(ddlText[i], ddlValue[i]);

            }

        }

        lblMesg.innerHTML = ddl.options.length + " items found.";

        if (ddl.options.length == 0) {

            AddItem("No items found.", "");

        }

    }

   

    function AddItem(text, value) {

        var opt = document.createElement("option");

        opt.text = text;

        opt.value = value;

        ddl.options.add(opt);

    }

</script>

سه روش جاوا اسکریپت فوق از روند فیلتر کردن و جستجو مراقبت می کند. اهمیت این روش ها در زیر شرح داده شده است :

1. CacheItems

این روش در رویداد onload بارگذاری می شود. کار این روش این است که آرایه های متن و ارزش را بپوشانید که برای ذخیره کردن موارد DropDownList استفاده می شود.

2. FilterItems

این روش زمانی رخ می دهد که رویداد keyup در TextBox جستجو رخ داده است. این روش برای جستجو بخش ردیف است و موارد DropDownList را فیلتر می کند.

3. AddItem

این روش به عنوان نام نشان می دهد که یک مورد جدید را به DropDownList اضافه می کند

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :