ASP.NET Client Side Search for text in a REPEATER row

You can use jquery to search in an HTML table.

$('table tr:contains("text")')

Select allOpen in new window

On this demo page:
https://www.aspsnippets.com/demos/1063/

Open a console and run:

$('table tr:contains("Hanna")').css("text-decoration","underline")

Select allOpen in new window

You can get the row index the same way.  On the example page:

$('table tr:contains("Hanna")').closest("tr").index()

Select allOpen in new window

(Same console) Grab the table and the row:

$table = document.getElementsByTagName('table')[0];
$table.rows[6]

Select allOpen in new window

Put it together

$table.rows[$('table tr:contains("Hanna")').closest("tr").index()]

Select allOpen in new window

You can get the individual cells if needed, adding td to the string.

$('table tr td:contains("Hanna")').css("color","blue")

Select allOpen in new window

Heres what the table looks like now:

can I do the same and search in a <div> instead of a table?

i don't use tables.

Also, I don't want to highlight one row, or even highlight any rows. I want to include ONLY the rows that are in the search. And then if someone changes the search, go back to the original data before the search and do the search again.

Here is an excellent example that does the search the way I want to do it:

http://preview.codecanyon.net/item/sorttables-responsive/full_screen_preview/4494798?_ga=2.6482930.1545974953.1544216800-1746464036.1541709811

We own this product, and use it in a repeater with tables. But I don't know how to use it in a repeater that doesn't have tables.

I added a table around it and turned my entire repeater row into one TD, but it looks awful that way. So I prefer a solution where I can search in the repeater row without it having to be a table.

We own this product, and use it in a repeater with tables. But I don't know how to use it in a repeater that doesn't have tables.

Because tables are special in the way they work with rows and cells, which the code is going to be reliant on.  Same with DataTables.net.  You should consider changing from divs.

If you are using div for a grid, something like this is more appropriate:

<div>
   <div class="row">
      <div class="col-sm-6">
         Something
      </div>
      <div class="col-sm-6">
         Something Else
      </div>
   </div>
</div>

Select allOpen in new window

our coding is responsive flex with a bit of adaptive. and under certain circumstances the columns are displayed differently.

the tables are just too constrictive for design. but what do I know. I don't do the css.

would your suggestion work with divs? or would we still need a table?

>> why do you have <tr> and <td> outside of a <table> element?  That's improper HTML.  

I haven't shown you any of my code.

I showed you the example. Are you saying his coding is incorrect?

is https://datatables.net/ free?

It looks like it is, but I want to confirm.

http://preview.codecanyon.net/item/sorttables-responsive/full_screen_preview/4494798?_ga=2.6482930.1545974953.1544216800-1746464036.1541709811

check this out and scrunch the browser width in. Does datatables do that? Because it's a requirement, and I looked at several of the examples and didn't see it as one of the results.

thanks!

I showed you the example. Are you saying his coding is incorrect?

The example page you provided, the data is still inside of a <table> element.  

It looks like it is, but I want to confirm.

Yep, just reference the css and js and off you go.

check this out and scrunch the browser width in. Does datatables do that? Because it's a requirement, and I looked at several of the examples and didn't see it as one of the results.

I think what you're asking is if it's responsive-- if so the answer is yes.  Highy customizable:
https://datatables.net/reference/option/

>>why do you have <tr> and <td> outside of a <table> element?  That's improper HTML.  

I'm not sure what you mean. The example of the product that I purchased, where the search works exactly as I desire, doesn't have a <TR> outside of the <TABLE>. I did a view source code on his example and it looks fine.

 <table cellpadding="0" cellspacing="0" border="0" id="table" class="tinytable">
            <thead>
                <tr>
                    <th class="nosort"><h3>ID</h3></th>
                    <th><h3>Name</h3></th>
                    <th><h3>Phone</h3></th>
                    <th><h3>Email</h3></th>
                    <th><h3>Birthdate</h3></th>
                    <th><h3>Last Access</h3></th>
                    <th><h3>Rating</h3></th>
                    <th><h3>Done</h3></th>
                    <th><h3>Salary</h3></th>
                    <th><h3>Score</h3></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>

Select allOpen in new window

>>The example page you provided, the data is still inside of a <table> element.  

Yes. ??? I said this was an example of a product we own where the search works.

Here is an excellent example that does the search the way I want to do it:

http://preview.codecanyon.net/item/sorttables-responsive/full_screen_preview/4494798?_ga=2.6482930.1545974953.1544216800-1746464036.1541709811

We own this product, and use it in a repeater with tables. But I don't know how to use it in a repeater that doesn't have tables.

https://datatables.net/reference/option/

I'll take a look. Thanks.

Oh, btw, just to confirm, you're saying that even datatables.net will not work without me using <table> instead of <div> with flex. Correct?

Yes, that one works fine because the rows are in a <table> element.  The reason I said you have to put in it a <table> element was because you had said that you don't currently:

can I do the same and search in a <div> instead of a table?

i don't use tables.

To use one of these responsive tables, you would need to nest a <table> element inside your <div> element where you want the table to sit.  I'm not aware of any code that does <div> searching, not something I use, but using the code provided earlier:

$('div:contains("Whatever")')

Select allOpen in new window

You can find <div>s where the text exists.  From there, you can hide elements that need to be hidden because you will have a collection of divs where it matches.  If you have the text inside children elements within in the <div> add those.  For example, if I want to find a <p> inside a <div> with the text:

$('div p:contains("Whatever")')

Select allOpen in new window

great! I have it working with the search!

however, I do want to know some things about hiding things I don't need. So be looking for more questions from me!

Thanks!