Avatar of Starr Duskk
Starr Duskk
Flag for United States of America asked on

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

I have an asp.net repeater. I want to search text in the repeater, any text on a row.

I downloaded and installed the jquery.quicksearch.js from github. I hadn't read the part about the project being abandoned and probably wouldn't work. I installed the examples and none of them worked in Chrome.

Can you direct me please to some javascript or jquery or something that searches within a repeater clientside? I don't need to have tables in there, and in fact would prefer not. I just want it to find any of the text that I am searching for and return the row if it does.

thanks!
ASP.NETJavaScript

Avatar of undefined
Last Comment
Starr Duskk

8/22/2022 - Mon
Dustin Saunders

You can use jquery to search in an HTML table.

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

Open 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")

Open in new window


You can get the row index the same way.  On the example page:
$('table tr:contains("Hanna")').closest("tr").index()

Open in new window


(Same console) Grab the table and the row:
$table = document.getElementsByTagName('table')[0];
$table.rows[6]

Open in new window


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

Open in new window


You can get the individual cells if needed, adding td to the string.
$('table tr td:contains("Hanna")').css("color","blue")

Open in new window


Heres what the table looks like now:
jsexample.png
Starr Duskk

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

i don't use tables.
Starr Duskk

ASKER
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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Starr Duskk

ASKER
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.
ASKER CERTIFIED SOLUTION
Dustin Saunders

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Dustin Saunders

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>

Open in new window

Starr Duskk

ASKER
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?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Starr Duskk

ASKER
>> 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?
Starr Duskk

ASKER
is https://datatables.net/ free?

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

ASKER
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!
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Dustin Saunders

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.  
tables1.png
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/
Starr Duskk

ASKER
>>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>

Open 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.
Starr Duskk

ASKER
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?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Dustin Saunders

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")')

Open 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")')

Open in new window

Starr Duskk

ASKER
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!