My javascript is not working with my page in asp.net

Question

Recently I am working on asp.net application but my found that my script is not working and don't know why even I tested in the fiddle.

I want my list box to be filtered when user key in any keyword in the textbox.

My list box ID is "ItemList".

My textbox ID is "txtSearchItem".

here is my script for the page:

<%@ Page Title="" Language="C#" MasterPageFile="~/Staff/Staff.Master" AutoEventWireup="true" CodeBehind="AddPackage.aspx.cs" Inherits="ExpressPrintingSystem.Staff.Owner.Package.AddPackage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
            $(document.getElementById("<%=txtSearchItem.ClientID%>")).on("keyup", function () {
                var search = this.value;
                $("option", document.getElementById("<%= ItemList.ClientID %>")).show().filter(function () {
                    return $(this).text().toLowerCase().indexOf(search.toLowerCase()) < 0;
                }).hide();
            }); 
    </script>
</asp:Content>

Here is the ListBox with is located in a table:

<td><asp:TextBox ID="txtSearchItem" TextMode="Search" Width="200px" runat="server" ClientIDMode="Static"/><br />
                    <asp:ListBox ID="ItemList" runat="server" Width="200px" DataSourceID="sdsItem" ClientIDMode="static" DataTextField="ItemName" DataValueField="ItemID"></asp:ListBox>
                    <asp:SqlDataSource ID="sdsItem" runat="server" ConnectionString="<%$ ConnectionStrings:printDBServer %>" SelectCommand="SELECT [ItemID], [ItemName] FROM [Item] WHERE ([ItemID] LIKE '%' + @keyword + '%')  OR ([ItemName] LIKE '%' + @keyword + '%')">
                    <SelectParameters>
                        <asp:ControlParameter ControlID="txtSearchItem" DefaultValue="I" Name="keyword" PropertyName="Text" />
                    </SelectParameters>
                    </asp:SqlDataSource>
                </td>

I not sure where is the error occur. I want the option tag to be hidden when the keywords in the text box is not match with the keywords user type in. The ListBox is linked with a datasource which will call all the record of the item out. Please help me.

Here is my whole complete code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Staff/Staff.Master" AutoEventWireup="true" CodeBehind="AddPackage.aspx.cs" Inherits="ExpressPrintingSystem.Staff.Owner.Package.AddPackage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
            $(document.getElementById("<%=txtSearchItem.ClientID%>")).on("keyup", function () {
                var search = this.value;
                $("option", document.getElementById("<%= ItemList.ClientID %>")).show().filter(function () {
                    return $(this).text().toLowerCase().indexOf(search.toLowerCase()) < 0;
                }).hide();
            }); 
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="cphStaffContent" runat="server">
    <h1>Add Package</h1>
    <asp:Label ID="lblError" runat="server" ForeColor="Red" Text=""></asp:Label>

        <table>
            <tr>
                <td><asp:Label ID="lblName" runat="server" Text="Name:"></asp:Label></td>
                <td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
                <td><asp:RequiredFieldValidator ID="rfvName" runat="server" ControlToValidate="txtName" ForeColor="Red" ErrorMessage="Please fill up the the Name field."></asp:RequiredFieldValidator></td>
            </tr>
            <tr>
                <td><asp:Label ID="lblSupport" runat="server" Text="Support Files:"></asp:Label></td>
                <td><asp:CheckBoxList ID="cblSupport" runat="server"></asp:CheckBoxList></td>
            </tr>
            <tr>
                <td><asp:Label ID="lblType" runat="server" Text="Type of Package:"></asp:Label></td>
                <td><asp:DropDownList ID="ddlType" runat="server" Height="17px" Width="128px"></asp:DropDownList></td>
            </tr>
            <tr>
                <td><asp:Label ID="lblItems" runat="server" Text="Package's Items:"></asp:Label></td>
                <td><asp:Table ID="tblPackageItems" runat="server" Width="100%"> 
                        <asp:TableRow>
                            <asp:TableCell>Item</asp:TableCell>
                            <asp:TableCell>Quantity</asp:TableCell>
                        </asp:TableRow>
                    </asp:Table> </td>
                <td><asp:TextBox ID="txtSearchItem" TextMode="Search" Width="200px" runat="server" ClientIDMode="Static"/><br />
                    <asp:ListBox ID="ItemList" runat="server" Width="200px" DataSourceID="sdsItem" ClientIDMode="static" DataTextField="ItemName" DataValueField="ItemID"></asp:ListBox>
                    <asp:SqlDataSource ID="sdsItem" runat="server" ConnectionString="<%$ ConnectionStrings:printDBServer %>" SelectCommand="SELECT [ItemID], [ItemName] FROM [Item] WHERE ([ItemID] LIKE '%' + @keyword + '%')  OR ([ItemName] LIKE '%' + @keyword + '%')">
                    <SelectParameters>
                        <asp:ControlParameter ControlID="txtSearchItem" DefaultValue="I" Name="keyword" PropertyName="Text" />
                    </SelectParameters>
                    </asp:SqlDataSource>
                </td>
            </tr>
            <tr>
                <td><asp:Label ID="lblEstPrice" runat="server" Text="Estimated Price (RM):"></asp:Label></td>
                <td><asp:Label ID="lblEstimatedPrice" runat="server" Text="0"/></td>
            </tr>
            <tr>
                <td><asp:Label ID="lblPrice" runat="server" Text="Package Price (RM):"></asp:Label></td>
                <td><asp:TextBox ID="txtPrice" runat="server"></asp:TextBox></td>
            </tr>    
        </table>
            <asp:Button ID="btnSubmit" runat="server" Text="Add Package"/>
            <asp:Button ID="btnCancel" runat="server" Text="Cancel"/>
</asp:Content>

This is my master page:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Staff.master.cs" Inherits="ExpressPrintingSystem.Staff.Staff" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Staff Portal</title>
    <link rel="stylesheet" href="~/styles/main.css" type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>

    <div id="page">
        <form runat="server">
        <div id="header">
            <asp:SiteMapDataSource ID="SiteMapDataSourceForStaff" SiteMapProvider="StaffSiteMap" runat="server" ShowStartingNode="false" />
            <div>
            <a href="#" class="logo"><img src="<%=Page.ResolveUrl("~/Images/logo/long_logo.png")%>" alt=""/></a>
            <ul id="navigation">
                    <li class="selected">
                        <a href="#">Home</a>
                    </li>
                    <asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSourceForStaff">
                        <ItemTemplate>
                            <li>
                                <asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>

                                <asp:Repeater runat="server" DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'>
                                    <HeaderTemplate>
                                        <ul>
                                    </HeaderTemplate>

                                    <ItemTemplate>
                                        <li>
                                            <asp:HyperLink runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>
                                        </li>
                                    </ItemTemplate>

                                    <FooterTemplate>
                                        </ul>
                                    </FooterTemplate>
                                </asp:Repeater>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                    <li style="float:right;">
                        <asp:HyperLink ID="userInfoControl" runat="server"/>

                        <ul id="userMenu" runat="server">

                        </ul>
                    </li>               </ul>
            </div>
        </div>

        <div id="content">
            <div>
                <asp:ContentPlaceHolder ID="cphStaffContent" runat="server">

                </asp:ContentPlaceHolder>
            </div>

        </div>
    </form>
        <footer id="footer">
            <div class="footcontent">
                <div>
                    <a href="#" class="logo"><img src="<%=Page.ResolveUrl("~/Images/logo/long_logo.png")%>" alt=""/></a>
                    <ul>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div class="footnote">
                <div>
                    <p>&copy; 2017 BY Express Printing System | ALL RIGHTS RESERVED</p>
                </div>
            </div>
        </footer>
        </div>
</body>
</html>

Answer 1

This kind of problem is usually encountered when there are conflicts between jQuery and other libraries. To stay out of trouble, call $.noConflict() and don't forget to run your jQuery code after the document is ready

$.noConflict();
jQuery(document).ready(function($){ /**/});

Answer 2

First create a JavaScript file instead of a script tag and than link that file in the master page like this:

<script src="<%=ResolveClientUrl("~/content/assets/vendor/jquery/dist/jquery.min.js")%>">
</script>