Hola mirar quiero colocar el livesearch de jquery en mi blog pero no lo consigo hacerlo bien.
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:
/**
* 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;
}
});
});
};
Este es el codigo del form:
Código:
<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>
Este es el codigo que propone donde se ven los resultados:
Código:
<?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 } ?>
Y este codigo es el que dice que se coloque en el footer:
Código:
<script type="text/javascript">
$('#s').liveSearch({ajaxURL: 'index.php?ajax=1&s='});
</script>
Perdon si he colocado mucho codigo!
Y Gracias!