如何在HTML中使用onkeyup（this）C＃使用文本框动态创建的链接中过滤数据？

Question

我正在动态地将数据推送到链接标签，并且我想使用带有onkeyup（this）的文本框来过滤项目。

我想过滤div_name并调用仅显示div_name所在位置的数据的动态函数。

这是我使用的代码：

<div id="search-area">
    <asp:TextBox class="searchInput" id="txtSearch" placeholder="Search for names.." runat="server" onkeyup="filter(this)"></asp:TextBox>
</div>
<div class="row">
    <%
        using (nlaCareers.applyOnlineJobsEntities db = new nlaCareers.applyOnlineJobsEntities())
        {
            foreach (var job in db.jobs_with_division_name)
            {
    %>
    <a class="col-md-3 jobs" href="Apply.aspx">
        <h3>
            <%: job.job_short %>
        </h3>
        <h4>
            <%: job.div_name %>
        </h4>
        <p>
            <%: job.job_long %>
        </p>
    </a>
    <%
            }
        }
    %>
</div>

Answer 1

通常，在这种情况下，服务器上需要有第二个端点，该端点返回部分页面结果（无论是否呈现）。 一个好的做法是让json端点仅返回匹配的行（作为仅包含数据的json数组）。

因此，在每次键入key时，您都需要执行ajax调用。 应该迭代响应，并为每个元素创建一个新的dom div class="row"并将其附加（例如，使用jquery ）。

注意：使用按键处理程序时，最好将它们包装在_.debounce（）之类的函数中，以避免执行无用的ajax请求。

如果执行上述操作，则可以安全地删除现有代码的迭代部分，并仅在页面加载时触发搜索，以通过ajax获得初始数据集。

更新：根据要求，我提供一个示例。 我没有asp.net以及runat="server"的语义，所以我提供了一个客户端实现，使用带有用户数据的公共json终结点： https : //jsonplaceholder.typicode.com/users 。 您将需要使用自定义数据在服务器上创建此文件。

https://jsfiddle.net/8y68uge1/25/

  var filter = _.debounce(function(searchElem) {
    console.log("searching for:", searchElem.value)

    $.ajax("https://jsonplaceholder.typicode.com/users", {//ajax request
      data: {
        name_like: searchElem.value
      },
      dataType: "json"
    }).done(function(data) {//When it finishes create and append the rows in the result area
      var rows = data.map(function(elem) {
        return $("<div class=\"row\"><a><h3>" + elem.name + "</h3><h4>" + elem.username + "</h4><p>" + elem.email + "</p></a></div>")
      })

      $(".result").empty().append(rows);
    });


  }, 500);//Perform ajax request only if 500 ms passed after the last keyup.

  //Initial rendering
  $(document).ready(filter);