Question

我有一个包含编辑，删除和添加的ListView。这里一切都很好，但是List太大了，我想给用户一个带文本框和按钮的serach功能。

当用户点击搜索按钮时，列表视图会按搜索条件进行过滤。

有人可以帮助我实现这个目标。谢谢

Answer 1

（回应对问题的评论......）

取决于您的DOM结构。您需要知道ListView如何布置其元素。例如，如果它们都是div元素，那么您需要知道JavaScript代码。（我将假设使用jQuery，因为这些天它是一个安全的假设。）

基本上，您的过滤器至少会包含一个文本输入元素：

<input type="text" id="searchFilter" />

您还可以使用按钮来启用过滤器，但为了简洁起见，我们只需按用户键入进行过滤：

$(document).ready(function() {
  $('#searchFilter').keyup(function() {
    // Here you would do your filtering.
  });
});

对于过滤本身，您可以使用:contains()选择器。查看有关它的信息here。基本上，你隐藏所有元素，然后显示匹配的元素。像这样（未经测试）：

$('#parentDiv div').hide();
$('#parentDiv div:contains(' + $('#searchFilter').val() + ')').show();

这个想法是隐藏所有子div（你的选择器可能需要更具体，取决于你的DOM），然后显示与过滤器匹配的那些。当然，不要忘记有一个默认大小写，以显示所有过滤器文本是否为空。

Answer 2

嗯，你必须知道你的基础结构;假设你正在渲染一个表，你需要编写JavaScript来循环遍历每一行并执行以下操作：

$("#table").find("tbody > tr").each(function() {
    var row = this;
    //loop through the cells, do the string match
    var tds = $(this).find("td");
    //match the inner HTML of the td to the search criteria, depending on how
    //your search critiera is setup        

    //if not found
    $(this).css("display", "none"); //hide the row
});

Answer 3

这取决于您如何呈现ListView，但如果您呈现一个表并希望进行过滤客户端，则可以使用jQuery插件，例如UI Table Filter

Answer 4

最终使用了这个：

protected void btnSearch_Click(object sender, EventArgs e)
{
    DS.SelectCommand = 
      "SELECT ReportName, ReportType, 
       FROM Table 
       WHERE ReportName LIKE @param 
       ORDER BY ReportType Desc";
   DS.SelectParameters.Add("Param", searchTxtBox.Text.Replace("'", "''"));
   DS.DataBind();
   ListView1.DataBind();               
}

Asp.net为ListView控件实现搜索功能

4 个答案: