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!
LVL 2
Starr DuskkASP.NET VB.NET DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dustin SaundersDirector of OperationsCommented:
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 DuskkASP.NET VB.NET DeveloperAuthor Commented:
can I do the same and search in a <div> instead of a table?

i don't use tables.
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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.
Dustin SaundersDirector of OperationsCommented:
The example is just to show you how to use the code, you can do whatever you want with it after, highlighting is just an example.  But...  why do you have <tr> and <td> outside of a <table> element?  That's improper HTML.  

Anyways, syntax is the same for other elements.

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

Open in new window


You can't grab the index of the rows, because they need to be in a table (tr being short of Table Row).  But, you can still use .closest and grab the id.  Anything that isn't a match becomes hidden.  Anything that is a match, you show.  When you clear the search, you unhide the hidden tables.

Why not just roll your code to something full featured?  I use DataTables.NET, that would probably work out better for you.
https://datatables.net/

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dustin SaundersDirector of OperationsCommented:
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 DuskkASP.NET VB.NET DeveloperAuthor Commented:
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?
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
>> 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 DuskkASP.NET VB.NET DeveloperAuthor Commented:
is https://datatables.net/ free?

It looks like it is, but I want to confirm.
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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!
Dustin SaundersDirector of OperationsCommented:
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 DuskkASP.NET VB.NET DeveloperAuthor Commented:
>>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 DuskkASP.NET VB.NET DeveloperAuthor Commented:
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?
Dustin SaundersDirector of OperationsCommented:
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 DuskkASP.NET VB.NET DeveloperAuthor Commented:
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!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.