代码之家 › 专栏 › 技术社区 › F.Hall

如何在html中使用onkeyup(this)C#文本框动态创建的链接中过滤数据?

dynamic html jquery c#

F.Hall · 技术社区 · 6 年前

我正在动态地将数据推送到一个链接标记,我想使用一个带有onkeyup的文本框来过滤项目(这个)。

我想过滤div\u name并调用动态函数,该函数只显示div\u 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>

1 回复 | 直到 6 年前

Marinos An 6 年前

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

因此,在每个keyup上,您都需要执行一个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);

推荐文章