Using jquery to search and return results on a page

Question

Currently I have alot of information that are in several different divs.

I want to be able to search this information (that is all on the same page) and print the results in a div, without having to use mysql.

I.e, if I searched for 'chair' all the results with 'chair' would appear in a div.

How would I go about doing this? I am rather new to jquery, but I am enjoying learning its amazing powers :)

score 4 · Accepted Answer · answered Jan 09 '12 at 13:23

If you really want to use jQuery, then you could do something like that:

var wordToSearch = "house";
$("div:contains('" + wordToSearch + "')").each(function() {
    $("#result").append(this.innerText);
});

Here is jsFiddle example: http://jsfiddle.net/GEyey/

score 0 · Answer 2 · answered Jan 09 '12 at 13:23

The first thing you should do is figure out which tags you want to make searchable. I'd assign a CSS class to the divs you want to make searchable. Then something like this would work:

$('#searchButton').click(function() {
    $('div.searchable').each(function() {
        if ($(this).text().indexOf(searchTerm) > -1) {
            //Do something.
        }
    });
});

score 0 · Answer 3 · edited May 23 '17 at 10:34

0

I think you could start reading this:

Find text string using jQuery?

If not here you have a very good approach:

http://johannburkard.de/blog/programming/javascript/6-more-jquery-tips-text-searching-page-load-time-and-others.html

edited May 23 '17 at 10:34

Community

1
1

answered Jan 09 '12 at 13:35

netadictos

7,602
2
42
69

eMi · Answer 4 · 2012-01-09T13:16:10.183

-1

U could iterate through all Divs, check if one of them has the Text "chair" and add the text in your ResultDataDiv (It could look something like that):

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
   if (divs[i].innerHTML.indexOf("chair"){
     $("#myDataDiv").innerHTML = divs[i].innerHTML;
   }                               
}

If you want an event to work on your page, you should call it inside the $(document).ready() function.

edited Jan 09 '12 at 13:16

answered Jan 09 '12 at 13:09

eMi

5,540
10
60
109

1. You are searching only "div" tags. What about "p", "span" and so on? 2. You should use at least .indexOf() not equals operator, because your solution implies that div contains only searched word. 3. div[i].innerHTML = "chair" should be ==, I guess. – ionoy Jan 09 '12 at 13:10
According to the Question, I quote: "Currently I have alot of information that are in several different divs." – eMi Jan 09 '12 at 13:12
Updated the Answer, I did it on the fly, so that he has an Idea of how he could achieve this >. – eMi Jan 09 '12 at 13:17
I sort of understand, but the rabbit hole gets slightly deeper. – user1138694 Jan 09 '12 at 13:24
woops hit enter... lets say I have a table with a row `chair$19.50` is it possible to do the search then return that table row? – user1138694 Jan 09 '12 at 13:25

Using jquery to search and return results on a page

4 Answers4