[英]how to filter data in a link created dynamically using a textbox with onkeyup(this) C# in html?
i'm dynamically pushing data to a link tag and i want to filter the items using a textbox with onkeyup(this). 我正在动态地将数据推送到链接标签,并且我想使用带有onkeyup(this)的文本框来过滤项目。
i want to filter on div_name and recall dynamic function that shows only data for where div_name is.. 我想过滤div_name并调用仅显示div_name所在位置的数据的动态函数。
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>
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).
一个好的做法是让json端点仅返回匹配的行(作为仅包含数据的json数组)。
So on each keyup you will need to perform an ajax call . 因此,在每次键入key时,您都需要执行ajax调用。 The response should be iterated and for each element a new dom
div class="row"
should be created and appended (eg using jquery
). 应该迭代响应,并为每个元素创建一个新的dom
div class="row"
并将其附加(例如,使用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.
注意:使用按键处理程序时,最好将它们包装在_.debounce()之类的函数中,以避免执行无用的ajax请求。
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. 如果执行上述操作,则可以安全地删除现有代码的迭代部分,并仅在页面加载时触发搜索,以通过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 . 我没有
asp.net
以及runat="server"
的语义,所以我提供了一个客户端实现,使用带有用户数据的公共json终结点: https : //jsonplaceholder.typicode.com/users 。 This you will need to create at your server, with custom data. 您将需要使用自定义数据在服务器上创建此文件。
https://jsfiddle.net/8y68uge1/25/ 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.