Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje26-07-2018, 22:21 (UTC)    
Título del mensaje: [JQuery] Buscador interno

Hola!
Les traigo un buscador interno muy fácil de usar, y configurar y de muy buen aspecto.

Imagen de ejemplo:


Codigo por encima de la pagina o extra "head":
Código:
<!-- www.cssplantillas.es.tl --><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src="https://dl.dropboxusercontent.com/s/5mqlcxg4264ri32/jquery.dataTables.min.js"></script>
<style>
*{padding: 0;margin: 0;box-sizing: border-box;font-family: arial;}
#input-search{width:100%;height:40px;font-size: 20px;text-indent: 10px;}
.content-search{width:600px;display:none;position:absolute;}
.content-table{width: 80%;max-height: 800px;height: auto;background:#EAEAEA;}
.content-table table{width: 100%;}
tbody tr td a{display: block;padding: 10px;color:#000;text-decoration: none;}
tbody tr td a:hover{background:#fff;color:brow;}
#table_length, #table_filter, #table_info, #table_paginate{display: none;}
</style>

Código donde quieras que se vea:
Código:
<!-- www.cssplantillas.es.tl --><input type="search" id="input-search" placeholder="Buscar aqui">
<div class="content-search"><div class="content-table">
<table id="table">
<thead><tr><td></td></tr></thead><tbody><tr>
<!-- Listado de busqueda -->
<tr><td><a href="URL A DIRECCIONAR">NOMBRE RECURSO 1</a></td></tr>
<tr><td><a href="URL A DIRECCIONAR">NOMBRE RECURSO 2</a></td></tr>
<tr><td><a href="URL A DIRECCIONAR">NOMBRE RECURSO 3</a></td></tr>
<tr><td><a href="URL A DIRECCIONAR">NOMBRE RECURSO 4</a></td></tr>
<!-- fin Listado de busqueda -->
</tbody></table></div></div>
<script type="text/javascript">
var buscador = $("#table").DataTable();
$("#input-search").keyup(function(){
buscador.search($(this).val()).draw();
if ($("#input-search").val() == ""){
$(".content-search").fadeOut(300);}else{
$(".content-search").fadeIn(300);}})</script>

Instrucciones:
Para que el buscador funcione con tus busquedas, debes editar la lines donde dice:
Cita:
<tr><td><a href="URL A DIRECCIONAR">NOMBRE RECURSO 1</a></td></tr>

Hay debes editar y colocar tus propios conceptos de búsqueda, la url + nombre de la pagina.
puedes agregar todo lo que quieras siempre colocando una linea más por busqueda:
Código:
<tr><td><a href="URL A DIRECCIONAR">NOMBRE RECURSO 4</a></td></tr>

Si deseas ver un ejemplo de como queda este buscador:
HAZ CLICK AQUI

Dudas y consultas las puedes hacer aquí mismo.
Saludos!
______________
CssPlantillas - Moderador Paginawebgratis.es

SIGUENOS EN REDES SOCIALES:


Ultima edición por cssplantillas el Jue Sep 13, 2018 2:09 pm; editado 2 veces
Mensaje27-07-2018, 13:15 (UTC)    
Título del mensaje:

Hola!,

Que buen buscador, tiene muy buena pinta y es sencillo.

Para los que deseen aqui tienen otro aporte de otro compañero, es un poco mas complejo pero igual tiene buenos resultados!
Link: https://www.paginawebgratis.es/forum/viewtopic.php?t=63239

Saludos
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group