Foros del Web » Programando para Internet » Jquery »

colocar resultado de busqueda livesearch jquery dentro de un div

Estas en el tema de colocar resultado de busqueda livesearch jquery dentro de un div en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/11/2008, 08:46
Avatar de 23r9i0  
Fecha de Ingreso: noviembre-2008
Ubicación: Catalonia
Mensajes: 203
Antigüedad: 16 años
Puntos: 33
colocar resultado de busqueda livesearch jquery dentro de un div

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('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></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('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></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!
  #2 (permalink)  
Antiguo 21/11/2008, 16:45
Avatar de 23r9i0  
Fecha de Ingreso: noviembre-2008
Ubicación: Catalonia
Mensajes: 203
Antigüedad: 16 años
Puntos: 33
Respuesta: colocar resultado de busqueda livesearch jquery dentro de un div

Veo que nadie me puede echar un cable, seguro que es una tontería pero yo no la veo al no saber de programación, bueno nos vemos!
Saludos
  #3 (permalink)  
Antiguo 06/10/2010, 04:21
 
Fecha de Ingreso: mayo-2006
Mensajes: 243
Antigüedad: 18 años, 6 meses
Puntos: 0
Respuesta: colocar resultado de busqueda livesearch jquery dentro de un div

Hola!
Tengo una duda.

Soy nueva usando JQuery, y quiero hacer lo siguiente:

Tengo una tabla con 5 columnas, quiero mostrar una columna por una, primero mostrar la primer columna, despues de 5 segundos, esconderla y mostrar la 2da columna, y asi, hasta mostrar la 5ta y volver a la primera

Todo esto automaticamente, sin presionar algun boton

Si es mas facil, pudiera cambiar las columnas por divs

Podrian ayudarme por favor!!...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:03.