En muchas ocasiones dentro de nuestros proyectos web tendremos la necesidad de colocar pequeñas secciones especialmente diseñadas para buscar ciertas cosas en concreto (Usuarios, Tutores, Libros, Cursos etc..) .
Regularmente los buscadores en las páginas web se reducen a dos tipos (Regularmente) a un buscador con opciones ya definidas listo para seleccionar la opción (un select en HTML ) o un espacio para poder escribir y buscar (Input Text en HTML), siendo el ultimo el más común. A su vez este tipo de Buscador lo podemos dividir en dos, un buscador estático en el cual introducimos lo que vayamos a buscar y dependiendo de lo que escribimos (bien o mal) nos regresara un resultado, por otro lado tenemos el buscador que nos regresa una serie de opciones relacionadas con las búsqueda (incluso cuando aún no terminamos de escribir lo que buscamos) parecido al buscador de Google.
En esta ocasión crearemos un buscador de autocompletado enfocándonos en buscar cosas en concretas (como el buscador de YouTube que solo busca videos) con Django y JavaScript.
Lo primero que debemos tomar en cuenta es que debemos contar con:
- Proyecto en Django
- Tener configurado nuestro proyecto para el uso de archivos statics (CSS, JavaScript, Imágenes)
- Tener en nuestra aplicación Jquery
- Una base de datos con en nuestro proyecto.
Comenzamos:
Lo primero que debemos hacer es crear nuestra función en nuestras vista (También puede ser una clase) la cual regresará en formato JSON los valores de nuestra búsqueda. Antes de irnos de lleno al Ejemplo en sí, vamos a comenzar con un ejemplo más simple, con un diccionario.
En mi caso utilizare una función la cual nombre búsqueda, dentro de búsqueda crearé un pequeño diccionario el cual regresaremos a nuestro navegador mediante Ajax.
El diccionario por sí solo no es posible enviarlo ya que AJAX espera un tipo de contenido y claro el contenido (En este caso JSON). Para resolver estos problemas procedemos a convertir a nuestro diccionario en un formato JSON, para ello importamos Json y HttpResponse con las siguientes sentencias:
from django.http import HttpResponse import json
Con esto procedemos a regresar el HttpResponse con dos parámetros, los datos serializados y el tipo de contenido:
def busqueda(request):
usuario = {'nombre': 'Eduardo Ismael'}
return HttpResponse( json.dumps(usuario), content_type='application/json' )
Con la última sentencia le decimos a Django que vamos a regresar una vista Http la cual se encontrara en formato JSON, gracias a estos dos parámetros somos capaces de poder regresar nuestro diccionario en un formato JSON el cual AJAX podrá recibir sin ningún problema.
Lo siguiente es crear nuestra URL, como ya sabemos para ello debemos de ir a nuestro archivo URL y colocar lo siguiente:
url(r'^proyecto/busqueda/$', busqueda, name='busquedaProyecto'),
En mi caso porque buscaré proyectos. Ya tenemos nuestra función y nuestra URL , ahora si entramos a esa URL debemos de tener una vista como esta :
Bien nuestra función trabaja de forma correcta, sin embargo no podemos dejar eso así, ya que cualquier usuario puede entrar a esa URL y ver los datos, así que ahora es necesario restringir que a esa URL para los Usuario. Django nos provee una método para saber si la petición es por medio de AJAX, y si, el nombre del método es is_ajax()
Entonces cambiamos nuestra función para que quede de esta manera:
def busqueda(request):
if request.is_ajax():
usuario = {'nombre': 'Eduardo Ismael'}
return HttpResponse( json.dumps(usuario), content_type='application/json' )
else:
return HttpResponse("Solo Ajax")
Listo ya arreglamos este problema, ahora nos falta implementar AJAX Creamos nuestro Input de tipo Text y agregamos un id, yo le asignare busquedProyecto como id:
input type="text" placeholder="Buscar proyectos" id="busquedProyecto"Dentro de nuestro archivo JS en el que estemos trabajando vamos a utilizar el método keyup de nuestro id, quedando de la siguiente forma:
$('#busquedProyecto').keyup(function(e){
consulta = $("#busquedProyecto").val();
$.ajax({
data: {'nombre': consulta},
url: '/proyecto/busqueda/',
type: 'get',
success : function(data) {
console.log(data[0].nombre);
},
error : function(message) {
console.log(message);
}
});
});
Utilizamos el KeyUp para estar solicitando una petición Ajax cada vez que el usuario presione una tecla dentro del input, si probamos tendremos una salida en consola como esta:
Quizás te estés preguntando, por que coloca data: {'nombre': consulta}, si no usamos el valor del input, a lo que yo contestaré: estamos preparando el terreno para lo que viene x) Ahora pasemos a nuestra verdadera sentencia dentro de nuestra función:
def busqueda(request):
if request.is_ajax():
proyectos = Proyecto.objects.filter(nombre__startswith= request.GET['nombre'] ).values('nombre', 'id')
return HttpResponse( json.dumps( list(proyectos)), content_type='application/json' )
else:
return HttpResponse("Solo Ajax");
Aclaraciones: utilizo Proyecto y proyectos para llamar a mi modelo y almacenar el resultado (Respectivamente) ya que me encuentro en busca de proyectos. Lo que hacemos primero es un select con un simple filtro, sin embargo aquí es donde se encuentra la “magia” de la búsqueda, dentro del método filter mandamos como parámetro un nombre__startswith == con lo que escribió el usuario.
Con nombreDelCampo__startswith podemos realizar un filtro más detallado indicando que deseamos todas las tuplas las cuales tengan un valor de la columna seleccionada que comiencen con algo parecido A ( Like en Sql ) , en este caso como observan quiero una lista de todo los proyecto que contengan ciertos caracteres en el valor de la columna nombre.
Para más Info: https://docs.djangoproject.com/en/1.7/ref/models/querysets/
Ahora sí, esta consulta no podemos mandarla directamente como a nuestro diccionario, aquí tendremos dos opciones o serializarlo o simplemente convertirlo a una lista, en este caso nos iremos por la lista.
Buena práctica: Es importante que cuando nos encontremos realizando Consultas a nuestras base de datos intentemos no realizar consultas donde obtengamos todos los datos ( Select *) si no vamos a usarlos, ya que esto es más trabajo para el manejador y mayor tiempo de respuesta.
Como podemos observar en nuestro navegador recibimos sin ningún problema el nombre de nuestro proyecto y sus respectivos id.
Listo con esto nos encontraríamos concluyendo este sencillo tutorial de Django quedando el tutorial casi por concluido, si te encuentras pensando como paso eso a mí HTML, pues eso ya corre por tu cuenta, pero te tejaré una pista :
console.log(data[0].nombre);
SI alguno de ustedes ya pudo resolverlo, coméntenlo y compartan su resultado con los demás, espero les sea de utilidad este ejemplo y puedan integrarlo fácilmente con sus proyectos.
Comenten que tal les pareció el Tutorial. Saludos