Question

我正在尝试使用用户生成的表格创建一个动态搜索引擎，该表格是使用向表格添加歌曲的表单创建的。我想搜索已经创建的列表。当我输入任何内容并且DOM中没有错误时，它没有做任何事情。有人可以告诉我哪里出错了吗？

这是我的HTML：

<asp:GridView ID="dgvImage" DataKeyNames="File_ID" runat="server" 
    AutoGenerateColumns="False" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" 
    BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical">
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:BoundField DataField="File_ID" HeaderText="ID"/>
        <asp:BoundField DataField="File_Name" HeaderText="Name" />
        <asp:TemplateField HeaderText="">
            <ItemTemplate>
                <asp:LinkButton ID="lnkView" runat="Server" Text="View" CommandName="View"
                    OnClick="View_Click"></asp:LinkButton>
                </span>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="">
            <ItemTemplate>
                <span onclick="return confirm('Are you sure to Delete the record?')">
                <asp:LinkButton ID="lnkdelete" runat="server" 
                    OnClick="lnkdelete_Click">Delete</asp:LinkButton>
                </span>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="#CCCC99" />
    <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
    <RowStyle BackColor="#F7F7DE" />
    <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#FBFBF2" />
    <SortedAscendingHeaderStyle BackColor="#848384" />
    <SortedDescendingCellStyle BackColor="#EAEAD3" />
    <SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>

这是我的javascript：

 {% extends "base.html" %}
    {% load static %}
    {% block title %}My Song List{% endblock %}
    {% block content %}
 <input type="text" name="search"  placeholder="Search by Title" class="animated-search-form" id="myInput onkeyup="search();"> 

 <div class="translucent-form-overlay">
 <form action="/" method="post">
   {% csrf_token %}
   {{ form }}
   <input type="submit" value="Add Song" />
 </form>
 </div>

 <div id="list-container">
 <h1 style="text-decoration:underline">Sorted Alphabetically by Song Title</h1>
 <h5>
         <table id="myList">
     {% for song in song_list %} //song_list is the model
     <tr> <td>Title: {{song.title}}</td> <td>Artist: {{song.artist}}</td> <td>Year: {{song.year}}</td> <td>Genre: {{song.genre}}</td></tr>
     {% endfor %}
         </table>
 </h5>
 </div>

 {% endblock %}

我首先尝试使用相同结果的JQuery，然后在使用纯javascript的w3c学校中找到了一个更简单的解决方案。但是，该版本在HTML中创建了表数据。我的数据实际存储在数据库中，在Django中呈现并传回HTML。

感谢您的任何建议或意见，麦克

从Django用户生成的表上的Javascript搜索过滤器

0 个答案: