如何在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);