Buscador automático [beta][Act] 31.08.20

Perfil del autor

Iniciado por Miguel92
En Plugins Más de 3 meses


Público Privacidad
Normal Tipo
7 Respuestas
87 Visitas
7 Puntos
Miguel92 Fundador 180 14
Topics 27
Respuestas 95
Miguel92 Fundador
Más de 3 meses
Pueden ver el funcionamiento del buscador en:
Página: Demo
Usuarios: Esteban, AnaMicuu, Tutorial, Umbreto, Anlitos
Contraseña: themaster (misma contraseña)

NOTA: Cabe recalcar que deberán editar el diseño, ya que lo tengo integrado en la demo...En el caso que requieran ese diseño o framework, les pasaré el archivo que he creado, pero haciendo uso de las clases de Bootstrap, por ende es compatible con Bootstrap.

Actualización:
* Se agregó una nueva en el paso 3, y los otros pasos se movieron 1 más.
* Se actualizó el archivo c.buscador.php (Se cambio el limite de 8 a 7, en la funcion SearchAjax)
* Se actualizó el archivo ajax.buscador.php
* Se actualizó el código que va en acciones.js

1 - Abren el archivo templates/t.buscador.tpl o lo crean y editan su contenido por este:
t.buscador.tpl (Es un gist)

2 - En t.php_files/ crean un archivo llamado "p.buscador.usuario.tpl" y en el agregan
p.buscador.usuario.tpl (Es un gist)

Nuevo paso agregado
3 - En t.php_files/ crean un archivo llamado "p.buscador.buscar.tpl" y en el agregan
p.buscador.buscar.tpl (Es un gist)

4 - En js/acciones.js a final de todo agregan:
function buscar_en_web(open) {
if(open == 3) {
$('.nav-search input').toggleClass('open', 'closed');
$('.nav-search input').on("keyup", function(letter){
var letter = $(this).val();
$.ajax({
type: 'POST',
url: global_data.url + '/buscador-buscar.php',
data: 'word=' + letter,
success: function(h) {
$('#results').addClass('shadow rounded').html(h);
}
});
});
} else {
location.href = global_data.url + '/buscador/';
}

}
function cerrarBus() {
$(this).on('click', function(){
$('#results').removeClass('shadow rounded').html('');
});
}
// READY
$(document).ready(function(){
   $('#buscarusuario input[name=usuario]').on('keyup', function(e){
var usuario = $(this).val(), id = $(this).data('user');
all = (usuario == 'all') ? 'todos' : usuario;
$.ajax({
type: 'POST',
url: global_data.url + '/buscador-usuario.php',
data: 'users=' + usuario + '&s=' + all + '&id=' + id,
success: function(usuarios) {
$('#resUser').html(usuarios);
}
});
   });
});

5 - En sections/head_menu.tpl u otro archivo que deseen y agregan: (Lo acomodan a su gusto)
<li class="nav-search position-absolute d-flex justify-content-center align-items-center">
<input type="text" name="q" placeholder="Buscar..." class="form-input closed">
<span><a class="d-flex justify-content-center align-items-center" title="Buscar" href="javascript:buscar_en_web(3)"><i feather="search"></i></a></span>
</li>
<div id="results"></div>

6 - En inc/php/ajax/ crean un archivo llamado "ajax.buscador.php" y agregan:
ajax.buscador.php (Es un gist)

7 - En inc/php/buscador.php buscan:
include("../class/c.posts.php");
$tsPosts = new tsPosts();

y lo reemplazan por
# Buscador
include("../class/c.buscador.php");
$tsBuscador = new tsBuscador();

un poco más abajo buscan
$tsPosts->getQuery()

y lo reemplazan por
$tsBuscador->getQuery()

8 - En inc/class/ crean un archivo llamado "c.buscador.php" y agregan:
c.buscador.php (Es un gist)

Algunas capturas:
Buscador en el menu:
Buscador automático [beta][Act] 31.08.20

Buscador:
Buscador automático [beta][Act] 31.08.20

Buscar usuarios:
Buscador automático [beta][Act] 31.08.20

7 puntos
7
Loading...

¿Como comentar?

Para poder comentar necesitas estar Registrado.


Si ya eres miembro ingresa a tu cuenta.