Asp.net Implement search feature to ListView control - asp.net

Question

I've got a ListView which contains edit,delete and add. All good here, however the List is too large and I would like give users a serach functionality with text box and button.
When user clicks on search button, List view gets filtered by search criteria.
could someone help me to achieve this please.
Thank you

Answer 1

(In response to the comments on the question...)
Depends a lot on your DOM structure. You'll need to know how the ListView has laid out its elements. For example, if they're all div elements then you'll need to know that for your JavaScript code. (I'm going to assume the use of jQuery, because it's a safe assumption these days.)
Essentially, your filter is going to have at least a text input element:
<input type="text" id="searchFilter" />
You can also have a button to engage the filter, but for brevity let's just filter as the user types:
$(document).ready(function() {
$('#searchFilter').keyup(function() {
// Here you would do your filtering.
});
});
For the filtering itself, you could use the :contains() selector. See information about it here. Basically, you'd hide all of the elements and then show the ones which match. Something like this (untested):
$('#parentDiv div').hide();
$('#parentDiv div:contains(' + $('#searchFilter').val() + ')').show();
The idea is to hide all of the child divs (your selectors may need to be more specific, depending on your DOM) and then show the ones which match the filter. Don't forget, of course, to have a default case to show all if the filter text is empty.

Answer 2

Well, you have to know your underlying structure; say you are rendering a table, you need to write JavaScript to loop through each row and do something like:
$("#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

It depends on how you render your ListView but if you render a table and want to do the filtering client side you could use a jQuery plugin such as UI Table Filter

Answer 4

ended up using this:
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();
}