Hice todo lo que decia y el problema es que los resultados aparecen dentro de un div que se desplega hacia abajo justo debajo del formulario de la busqueda y lo que me gustaria hacer es que los resultados aparezcan en una nueva pagina como hace el buscador normal de wordpress. En el theme k2 de wordpress lo hace pero no se tanto para averiguar como lo hace.
http://xcodetuts.com/javascript-ajax/building-a-wordpress-website-live-ajax-search-using-jquery "el codigo lo saque de aqui"
Este es el código js:
Código:
Este es el codigo del form:/** * LiveSearch (requires the dimensions plug-in) * * Applies "live search" to input-fields * * Usage: jQuery('#q').liveSearch({ajaxURL: '/ajax/search/?q='}); * * @class liveSearch * @param {Object} conf, custom config-object * * Copyright (c) 2008 Andreas Lagerkvist (andreaslagerkvist.com) * Released under a GNU General Public License v3 (http://creativecommons.org/licenses/by/3.0/) */ // Hide all search-results if you click outside them $(document.body).click(function(event) { if(!$(event.target).parents('div.live-search-results').length) { jQuery('div.live-search-results').slideUp(300); } }); jQuery.fn.liveSearch = function(conf) { var config = jQuery.extend({ ajaxURL: '/mod/search-results.php?q=' }, conf); return this.each(function() { var input = jQuery(this); var tmpOffset = input.offset(); var inputDim = { left: tmpOffset.left, top: tmpOffset.top, width: input.outerWidth(), height: input.outerHeight() }; var results = jQuery('<div class="live-search-results"></div>').appendTo(document.body).hide().slideUp(0); var resultsShit = parseInt(results.css('paddingLeft'), 10) + parseInt(results.css('paddingRight'), 10) + parseInt(results.css('borderLeftWidth'), 10) + parseInt(results.css('borderRightWidth'), 10); inputDim.topNHeight = inputDim.top + inputDim.height; inputDim.widthNShit = inputDim.width - resultsShit; results.css({ position: 'absolute', left: inputDim.left +'px', top: inputDim.topNHeight +'px', width: inputDim.widthNShit +'px' }); input.keyup(function() { if(this.value != this.lastValue) { input.addClass('ajax-loading'); var q = this.value; if(this.timer) { clearTimeout(this.timer); } this.timer = setTimeout(function() { jQuery.get(config.ajaxURL +q, function(data) { input.removeClass('ajax-loading'); if(data.length) { results.html(data).slideDown(300); } else { results.slideUp(300); } }); }, 200); this.lastValue = this.value; } }); }); };
Código:
Este es el codigo que propone donde se ven los resultados:<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/"> <label class="hidden" for="s"><?php _e('Search for:'); ?></label> <div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Search" /> </div> </form>
Código:
Y este codigo es el que dice que se coloque en el footer:<?php if($_GET['ajax'] == '1'){ ?> <?php if (have_posts()) : ?> <h2>Search Results for "<?php the_search_query(); ?>"</h2> <?php while (have_posts()) : the_post(); ?> <div class="search-result"> <h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3> </div> <?php endwhile; ?> <?php else : ?> <h2>No posts found. Try a different search?</h2> <?php endif; ?> <?php }else{ ?> <?php get_header(); ?> <div id="content" class="narrowcolumn"> <?php if (have_posts()) : ?> <h2 class="pagetitle">Search Results</h2> <div class="navigation"> <div class="alignleft"><?php next_posts_link('« Older Entries') ?></div> <div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div> </div> <?php while (have_posts()) : the_post(); ?> <div class="post"> <h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3> <small><?php the_time('l, F jS, Y') ?></small> <p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p> </div> <?php endwhile; ?> <div class="navigation"> <div class="alignleft"><?php next_posts_link('« Older Entries') ?></div> <div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div> </div> <?php else : ?> <h2 class="center">No posts found. Try a different search?</h2> <?php include (TEMPLATEPATH . '/searchform.php'); ?> <?php endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> <?php } ?>
Código:
Perdon si he colocado mucho codigo!<script type="text/javascript"> $('#s').liveSearch({ajaxURL: 'index.php?ajax=1&s='}); </script>
Y Gracias!