how to filter data in a link created dynamically using a textbox with onkeyup(this) C# in html?

Question

i'm dynamically pushing data to a link tag and i want to filter the items using a textbox with onkeyup(this).

i want to filter on div_name and recall dynamic function that shows only data for where div_name is..

here's the code i have working with:

<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

Normally in such cases there needs to be a second endpoint on the server which returns partial page results (either rendered, or not). A good practice is to have a json endpoint returning only matching rows (as a json array containing data-only).

So on each keyup you will need to perform an ajax call . The response should be iterated and for each element a new dom div class="row" should be created and appended (eg using jquery ).

Note: when using key-up handlers it would be a good practice to wrap them inside functions like _.debounce() , to avoid performing useless ajax requests.

If you perform the above, you can safely remove the iterate part of your existing code, and just trigger the search when page loads, to also get the initial set of data through ajax.

Update: As requested I provide an example. I don't have knowlege on asp.net and the semantics of runat="server" so I provide a client-side implementation, using a public json endpoint with user data: https://jsonplaceholder.typicode.com/users . This you will need to create at your server, with custom data.

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);