如何在HTML中结合C#，用带onkeyup(this)的文本框过滤动态链接数据？

嘿，我看你需要实现一个基于div_name字段的实时过滤功能，结合你给出的ASP.NET代码片段，我来给你梳理一个完整的可落地方案哈！

首先，你在后端遍历nlaCareers.applyOnlineJobs生成数据的时候，得给每个数据项绑定div_name的专属标识——推荐用HTML自定义数据属性data-div-name，这样前端JS能精准获取到这个字段值，不会被其他文本内容干扰。修改后的后端代码大概是这样：

<div class="row">
    <% using (var jobs = nlaCareers.applyOnlineJobs.GetJobs()) { %>
        <% foreach (var job in jobs) { %>
            <!-- 给每个数据项容器添加data-div-name属性，存储div_name字段的值 -->
            <div class="job-item" data-div-name="<%= job.div_name %>">
                <!-- 这里放你的链接标签和其他职位内容，比如： -->
                <a href="apply.aspx?id=<%= job.id %>"><%= job.title %></a>
                <p>部门：<%= job.div_name %></p>
            </div>
        <% } %>
    <% } %>
</div>

接下来，在页面的<script>标签里编写filter函数，核心逻辑是：获取文本框的输入值，遍历所有数据项，检查data-div-name是否包含关键词（做不区分大小写的模糊匹配），匹配的显示，不匹配的隐藏。另外我还给你加了防抖优化（延迟300ms执行过滤），避免输入过快时频繁触发DOM操作导致页面卡顿：

<script>
// 防抖计时器，用于控制过滤触发频率
let debounceTimer;

function filter(inputElement) {
    // 清除之前的计时器，避免重复执行
    clearTimeout(debounceTimer);
    
    debounceTimer = setTimeout(() => {
        // 获取输入关键词，转小写+去除首尾空格，提升匹配容错性
        const searchTerm = inputElement.value.trim().toLowerCase();
        // 获取所有数据项元素
        const jobItems = document.querySelectorAll('.job-item');
        
        jobItems.forEach(item => {
            // 拿到当前项的div_name值并转小写
            const divName = item.getAttribute('data-div-name').toLowerCase();
            // 判断是否显示：搜索框为空则展示所有，否则检查是否包含关键词
            const shouldShow = searchTerm === '' || divName.includes(searchTerm);
            item.style.display = shouldShow ? 'block' : 'none';
        });
    }, 300);
}
</script>

把这些部分拼到你的页面里，最终完整代码大概是这样：

<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 (var jobs = nlaCareers.applyOnlineJobs.GetJobs()) { %>
        <% foreach (var job in jobs) { %>
            <div class="job-item" data-div-name="<%= job.div_name %>">
                <a href="apply.aspx?id=<%= job.id %>"><%= job.title %></a>
                <div>Department: <%= job.div_name %></div>
                <!-- 这里可以添加更多职位相关信息 -->
            </div>
        <% } %>
    <% } %>
</div>

<script>
let debounceTimer;
function filter(inputElement) {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        const searchTerm = inputElement.value.trim().toLowerCase();
        const jobItems = document.querySelectorAll('.job-item');
        
        jobItems.forEach(item => {
            const divName = item.getAttribute('data-div-name').toLowerCase();
            const shouldShow = searchTerm === '' || divName.includes(searchTerm);
            item.style.display = shouldShow ? 'block' : 'none';
        });
    }, 300);
}
</script>

这样就能实现你想要的功能了：在文本框输入内容时，会自动过滤出div_name包含关键词的数据项；输入清空后会重新显示所有内容，防抖优化也让整体交互更流畅~

内容的提问来源于stack exchange，提问作者F.Hall