Question

I work on a WordPress site.

I want to load search results into the currently open page using AJAX methods. To be able to do that, I need to obtain the output of the PHP code that does the search, without opening the new page.

Normally, after you type a search word, WordPress opens the new page with URL like this:

mydomain.com/?s=searchword

The output of the PHP code that does the searching is shown in the #container div of that page.

Question: how can I get the search results without opening the new page, so that I can load them using jQuery into the page that is currently open?

I would be grateful for your advice!

Answer 1

This plugin does it for you pretty much. You might want to look at the source code of the plugin and see how you can leverage it for yourself.

http://wordpress.org/extend/plugins/threewp-ajax-search/screenshots/

I suppose you could also call the search page yourself, parse out the #container value and then parse the results list yourself. If you want help with that let me know. Otherwise I think an already developed plugin is pretty convenient.

As requested here is some more thoughts on how I think I might do this. None of this is tester, but I the general ideas are sound. You will have to tweak things as appropriate to match your installation. For example Get vs Post. Timeout. Request Data.

1. Use jQuery’s ajax call to request the search page.

   $.ajax({
                   async: true,
                   data: $dataToSend,
                   datatype: 'xml',
                   beforeSend: function() {
                       console.log('rq');
                   },
                   error: function(jqXHR, textStatus, errorThrown) {
                       console.log('error');
                   },
                   success: function(xml, textstatus, jqXHR) {
                       //Process Response Data
                   },          
                   timeout: 10000,
                   type: 'POST',
                   url: 'http://' + document.location.host + '/search'     
           });
   

2. Process the response and cull out the data you are interested in.
   http://www.switchonthecode.com/tutorials/xml-parsing-with-jquery

   $(xml).find(‘div[class=”post”]’).each( function() {
   $(“#currentPage”).append($(this) + “
   “);
   });

SO refuses to code block that list bit. So sorry about that.