在asp.net表中使用jquery快速搜索插件进行快速搜索

Quicksearch using jquery quicksearch plugin in asp.net table

本文关键字：搜索 插件 jquery net asp      更新时间：2023-09-26

我正在尝试在我的asp.net应用程序中实现jquery快速搜索插件。以下代码在ASP.NET GridView中工作，但在ASP.NET表中不工作。请帮助

我有一个ASP.NET表，我想实时筛选/搜索文本框上keydown/textchange事件的表行。每当我在文本框中键入内容时，如果表中存在特定的文本，则只有该特定的行可见。

请帮忙。。。我的项目将在9天后上线。



<script type="text/javascript">
		    $(function () {
		        $('input#id_search').quicksearch('table#Table1 tbody tr');
             })
    </script>
<script src="scripts/jquery-1.4.1-vsdoc.js"></script>
<script src="scripts/jquery-1.4.1.js"></script>
<script src="scripts/jquery-1.4.1.min.js"></script>
<script src="scripts/jquery.quicksearch.js"></script>
<form runat="server">
  <div>
    <input id=id_search type=text placeholder="Search" />
  </div>
  <div>
     <asp:Table ID="Table1" runat="server" ClientIDMode="Static"  CssClass="table table-responsive">
       <asp:TableHeaderRow>
         
          <asp:TableHeaderCell Text="Block"></asp:TableHeaderCell>
		  <asp:TableHeaderCell Text="Flat"></asp:TableHeaderCell>
          <asp:TableHeaderCell Text="Name"></asp:TableHeaderCell>
         
       </asp:TableHeaderRow>
       
             <asp:TableRow>
                 <asp:TableCell Text="B-Wing"></asp:TableCell>
                 <asp:TableCell Text="101"></asp:TableCell>
                 <asp:TableCell Text="ABC"></asp:TableCell>
             </asp:TableRow>
       
             <asp:TableRow>
                 <asp:TableCell Text="A-wing"></asp:TableCell>
                 <asp:TableCell Text="102"></asp:TableCell>
                 <asp:TableCell Text="DEF"></asp:TableCell>
            </asp:TableRow>
       
    </asp:Table>
  </div>
  </form>

Tbody没有生成。。。同时检查以下jquery参考

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

    $(document).ready(function () {
        $('input#id_search').quicksearch('table#Table1 tr');
    });
    </script>

编辑：在我的机器上工作的页面的完整源代码确保脚本存在于它们的位置

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ControlTest.WebForm1" %>
<%@ Register Assembly="ControlTest" Namespace="ControlTest" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

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

<%--<script src="Scripts/jquery-2.1.0.js" type="text/javascript"></script>--%>
<script src="jquery.quicksearch.js"></script>
</head>
<body>
    <form id="form1" runat="server">

  <div>
    <input id=id_search type=text placeholder="Search" />
  </div>
  <div>
     <asp:Table ID="Table1" runat="server" ClientIDMode="Static"  CssClass="table table-responsive">
       <asp:TableHeaderRow>
          <asp:TableHeaderCell Text="Block"></asp:TableHeaderCell>
          <asp:TableHeaderCell Text="Flat"></asp:TableHeaderCell>
          <asp:TableHeaderCell Text="Name"></asp:TableHeaderCell>
       </asp:TableHeaderRow>
             <asp:TableRow>
                 <asp:TableCell Text="B-Wing"></asp:TableCell>
                 <asp:TableCell Text="101"></asp:TableCell>
                 <asp:TableCell Text="ABC"></asp:TableCell>
             </asp:TableRow>
             <asp:TableRow>
                 <asp:TableCell Text="A-wing"></asp:TableCell>
                 <asp:TableCell Text="102"></asp:TableCell>
                 <asp:TableCell Text="DEF"></asp:TableCell>
            </asp:TableRow>
    </asp:Table>
  </div>

<script>

    $(document).ready(function () {
        //$('input#id_search').quicksearch('table#Table1 tr');
        $('input#id_search').quicksearch('table#Table1 tr');
    });
            //
    </script>

    </form>
</body>
</html>
相关文章：