CODEWITHSUNDEEP
jqueryhtmlsearch
user1138694
user1138694

Reputation: 39

Using jquery to search and return results on a page

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 :)

Upvotes: 2

Views: 1959

Answers (4)

netadictos
netadictos

Reputation: 7722

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

Upvotes: 0

Mike Thomsen
Mike Thomsen

Reputation: 37506

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.
        }
    });
});

Upvotes: 0

ionoy
ionoy

Reputation: 985

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/

Upvotes: 4

eMi
eMi

Reputation: 5618

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.

Upvotes: -1

Related Questions