ASP.NET javascript, блокирующий другой скрипт

Question

У меня есть HTML-страница, в которой я выполняю 2 разных JavaScripts.

Один для текстового поля автозаполнения, а другой предназначен для зависания над Gridview.

Недавно я добавил скрипт зависания, и автозаполнение перестало работать, и я уверен, что сделаю что-то неправильно!

<%@ Page Language="C#" AutoEventWireup="true" Inherits="SearchER" CodeBehind="Search.aspx.cs" %> 

<style type="text/css"> 
    body { 
     font-family: Arial; 
     font-size: 10pt; 
    } 

    #form1 { 
     height: 645px; 
    } 

    .form-control { 
    } 

    td { 
     cursor: pointer; 
    } 

    .hover_row { 
     background-color: #FFFFBF; 
    } 
</style> 

<form id="form1" runat="server" style="background-color: #FFFFFF; font-family: tahoma; margin-left: 0px; margin-top: 0px;"> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script> 

    <div style="background-color: white; height: 46px;"> 

     <asp:HyperLink ID="HyperLink1" runat="server" Font-Names="Tahoma" Font-Size="X-Large" NavigateUrl="~/Default.aspx">Πίσω στο Εξοδολόγιο</asp:HyperLink> 

    </div> 
    <div style="margin-left: AUTO; margin-top: 100px; margin-bottom: 12px; font-family: tahoma; font-size: x-large; width: 627px; height: 63px; margin-right: auto;" align="center"> 

     <script type="text/javascript"> 

      $(document).ready(function() { 
       $("[id*=txtSearch]").autocomplete({ source: '<%=ResolveUrl("~/Search_CS.ashx") %>' }); 
      }); 

     </script> 
     &nbsp;<asp:Label ID="Label1" runat="server" Text="Find a name:"></asp:Label> 
     <asp:TextBox ID="txtSearch" runat="server" CssClass="form-control" autocomplete="ON" 
      Width="296px" OnTextChanged="txtSearch_TextChanged" BorderStyle="Solid" BorderColor="#507CD1" Height="22px" /> 
     <asp:Button ID="Button1" Text="Find" runat="server" OnClick="Submit" BorderStyle="Solid" Height="26px" Style="margin-top: 0px; margin-left: 0px;" Width="96px" BorderColor="#507CD1" /> 
     &nbsp; 
    </div> 

    <div style="height: 412px; width: auto; margin-top: 0px; margin-left: auto; margin-right: auto;" align="center"> 

     <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound" OnSelectedIndexChanged="OnSelectedIndexChanged" Height="150px" Style="word-break: keep-all; word-wrap: normal; margin-left: auto; margin-right: auto; width: auto; margin-top: 0px;" AllowSorting="True" CellSpacing="3"> 
      <AlternatingRowStyle BackColor="White" /> 
      <Columns> 
       <asp:BoundField DataField="TripID" HeaderText="id" /> 
       <asp:BoundField DataField="EmployeeName" HeaderText="Όνομα" /> 
       <asp:BoundField DataField="FromDate" HeaderText="Ημερομηνία-(από)" /> 
       <asp:BoundField DataField="ToDate" HeaderText="Ημερομηνία-(μέχρι)" /> 
      </Columns> 
      <EditRowStyle BackColor="#2461BF" /> 
      <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
      <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
      <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> 
      <RowStyle BackColor="#EFF3FB" Font-Names="Tahoma" /> 
      <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> 
      <SortedAscendingCellStyle BackColor="#F5F7FB" /> 
      <SortedAscendingHeaderStyle BackColor="#6D95E1" /> 
      <SortedDescendingCellStyle BackColor="#E9EBEF" /> 
      <SortedDescendingHeaderStyle BackColor="#4870BE" /> 
     </asp:GridView> 
     <asp:LinkButton ID="LinkButton1" runat="server"></asp:LinkButton> 

    </div> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script type="text/javascript"> 

      $(function() { 

       $("[id*=GridView1] td").hover(function() { 
        $("td", $(this).closest("tr")).addClass("hover_row"); 
       }, function() { 
        $("td", $(this).closest("tr")).removeClass("hover_row"); 
       }); 
      }); 

     </script> 
</form> 

В этом коде GridView hover works, autocomplete нет!

Answer 1

Вы ссылаетесь JQuery дважды, удалите нижний:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 

Кроме того, я хотел бы предложить, чтобы переместить код autcomplete донизу, так что вы бы один метод загрузки - помните $(function() { является обобщающим для $(document).ready() так объявляя его один раз чище/лучше (source):

<script type="text/javascript"> 

     $(function() { 

      $("[id*=txtSearch]").autocomplete({ source: '<%=ResolveUrl("~/Search_CS.ashx") %>' }); 

      $("[id*=GridView1] td").hover(function() { 
       $("td", $(this).closest("tr")).addClass("hover_row"); 
      }, function() { 
       $("td", $(this).closest("tr")).removeClass("hover_row"); 
      }); 
     }); 

    </script>