Beruflich Dokumente
Kultur Dokumente
- entre Desarrolladores
2
(https://twitter.com/entredevs) (https://www.facebook.com/entredesarrolladores) Buscar Preguntas
entre Desarrolladores
Recibe ayuda de expertos
Recibe respuestas
Respuestas, votos y comentarios
Pregunta
Quetal.
Tengo un template que muestra una lista de estudiantes registrados. Pero cuando ya la lista se hace muy larga se hace tedioso tener que
buscar con el scroll hasta por fin encontrar a un estudiante.
Necesito crear entonces, un cuadro de búsqueda que encuentre una cadena de texto cualquiera y si coincide con el nombre o documento
de identidad del estudiante, quite la tabla de todos los estudiantes y me ponga una tabla solamente con los datos de el estudiante
encontrado. Y si no está, simplemente muestre una etiqueta h3 que diga ¡estudiante no encontrado!
Aquí el truco es que Ajax haga la búsqueda y dependiendo del resultado modifique el template, y todo ello, obviamente, sin recargar la
página.
preguntado (../6828/crear-cuadro-de-b%C3%BAsqueda-con-ajax-en-django) por ibrames (../user/ibrames) (970 puntos) Ene 21, 2015 en Software
(../software)
https://entredesarrolladores.com/6828/crear-cuadro-de-búsqueda-con-ajax-en-django 1/13
8/3/2020 ¿Crear cuadro de búsqueda con Ajax en Django? - entre Desarrolladores
Responder Comentar
2
1 Respuesta
white (../user/white)
(../user/white)
Puntos 75840
Bien, vamos a hacer algunos pasos, hize un codigo con un buscador simple en ajax, no es gran cosa pero es lo básico para que
puedas partir desde ese buscador y agregarle mas opciones. me apoye de Jquery y de Jquery UI autocomplete
Paso 1
creando una aplicacion para el ajax.
Ejecuta este comando: python manage.py startapp ajax esto creara una carpeta 'ajax', edita el archivo views.py y agrega este
contenido:
def search(request):
# generamos la query
if isCI:
users = User.objects.filter(CI=match.groupdict()['CI'])
else:
users = User.objects.filter(username__contains=q)
# to json!
data = serializers.serialize('json', users, fields=user_fields)
guardalo.
https://entredesarrolladores.com/6828/crear-cuadro-de-búsqueda-con-ajax-en-django 2/13
8/3/2020 ¿Crear cuadro de búsqueda con Ajax en Django? - entre Desarrolladores
url(r'^ajax/search/', view='ajax.views.search'),
2
Ahora podras acceder a /ajax/search/ con una petición ajax, he agregado una condicional para que cuando no detecte una
Nota: yo supuse que el identificador de identididad esta en la tabla auth_users, si es asi entonces Agrega este codigo al archivo
/ajax/init.py:
ci_field = models.IntegerField()
ci_field.contribute_to_class(User, 'CI')
Paso 2
Agregando el html, js y css.
<div id="container">
<div class="search">
<div class="searchbox">
<label>Buscar un estudiante:</label>
<span class="info">(Puede ser un nombre o el id de identidad)</span>
<input id="search_input" type="text" name="q">
{% csrf_token %}
</div>
<div class="results">
<h1 class="error"></h1>
<div class="wrapper"></div>
</div>
</div>
</div>
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
y en INSTALLED_APPS agrega:
'django.contrib.staticfiles',
https://entredesarrolladores.com/6828/crear-cuadro-de-búsqueda-con-ajax-en-django 3/13
8/3/2020 ¿Crear cuadro de búsqueda con Ajax en Django? - entre Desarrolladores
function __init()
2
{
$('#search_input')
.val('')
.focus()
.keyup(function(){
if(!$.trim($(this).val()))
$('.results .error').empty().hide();
});
if (cache[request.term]) {
response(cache[request.term]);
return;
}
$.ajax({
dataType : 'json',
method : 'POST',
url : '/ajax/search/',
data : {
q : encodeURIComponent(request.term),
csrfmiddlewaretoken : $('input[name=csrfmiddlewaretoken]').val()
},
success : function(data) {
var users = [];
for(var x in data)
{
users.push({
username : data[x].fields['username'],
CI : data[x].fields['CI'],
email : data[x].fields['email']
});
}
cache[request.term] = users;
response(users);
}
});
},
response: function(event, ui) {
if (ui.content.length === 0) {
$('.results .error').html('No se encontraron resultados').show();
$('.results .wrapper').empty();
}
else
$('.results .error').empty().hide();
}
}).autocomplete('instance')._renderItem = function(ul, item) {
https://entredesarrolladores.com/6828/crear-cuadro-de-búsqueda-con-ajax-en-django 4/13
8/3/2020 ¿Crear cuadro de búsqueda con Ajax en Django? - entre Desarrolladores
2 .parent().parent()
.append('<span class="email"><strong>Email:</strong><span></span></span>')
.find('.email > span').append(item.email)
.parent().parent();
return $('<div></div>')
.data('item.autocomplete', item)
.append(user_tmpl)
.appendTo(ul);
};
}
$(document).ready(__init);
https://entredesarrolladores.com/6828/crear-cuadro-de-búsqueda-con-ajax-en-django 5/13
8/3/2020 ¿Crear cuadro de búsqueda con Ajax en Django? - entre Desarrolladores
body{
2
margin: 0;
padding: 0;
font-family: monospace;
}
#container{
width: 1000px;
margin: 0 auto;
margin-top: 30px;
}
.ui-helper-hidden-accessible{ display:none!important; }
.search{
background: #f1f1f1;
border-bottom: 1px solid #CCCCCC;
border-radius: 4px;
padding: 10px;
width: 750px;
margin: 0 auto;
}
.search .searchbox{
border-bottom: 1px solid #DDDDDD;
padding-bottom: 10px;
}
.search .results{
border-top: 1px solid #FFFFFF;
min-height: 20px;
}
https://entredesarrolladores.com/6828/crear-cuadro-de-búsqueda-con-ajax-en-django 6/13
8/3/2020 ¿Crear cuadro de búsqueda con Ajax en Django? - entre Desarrolladores
{
2 margin: 10px;
}
respondido (../6828/crear-cuadro-de-b%C3%BAsqueda-con-ajax-en-django?show=6833#a6833) por white (../user/white) (75.840 puntos) Ene 21, 2015
https://entredesarrolladores.com/6828/crear-cuadro-de-búsqueda-con-ajax-en-django 7/13
8/3/2020 ¿Crear cuadro de búsqueda con Ajax en Django? - entre Desarrolladores
2 (../user/maxgonpe)
0 @white (../user/white?ref=mention) De verdad te felicito por tu dedicación. Estoy buscando un equivalente a lo que hace html5 y que
tambien se puede hacer en PHP de que ha medida de que se va typeando en el cuadro de texto del filtro las filas se van borrando y
solo quedan las o la que cumple el criterio o ninguna; He leído tu respuesta, pero me pierdo en algunos intermedios.
1) la view.py donde hay que pegar el codigo del primer cuadro , es en la app ajax?
4) no estoy trabajando con los modelos de user, sino un modelo cualquiera con 3 o cuatro campos
campo1, campo2 ... campox . debo incluir esa informacion en el archivo /ajax/init.py ??
6) tu respuesta es del 2015, solo espero te acuerdes y aun estes en estos quehaceres?
7) sino cualquiera que tenga el asunto claro y lo pueda compartir, estaría muy agradecido.
Saludos.
(https://bit.ly/erm-ed)
https://entredesarrolladores.com/6828/crear-cuadro-de-búsqueda-con-ajax-en-django 8/13
8/3/2020 ¿Crear cuadro de búsqueda con Ajax en Django? - entre Desarrolladores
2
EN EL BLOG
Múltiples computadoras con las mismas claves privadas y públicas ssh (../18164/m%C3%BAltiples-computadoras-con-mismas-claves-privadas-p%C3%BAbli…
179 0 Feb 16
Que biblioteca usar para imagen filtering en el espacio de frecuencia en C++ que sea completa y integrable con QT c++ (../18152/biblioteca-filtering-espacio-f…
1272 0 Ene 15
PREGUNTAS RELACIONADAS
https://entredesarrolladores.com/6828/crear-cuadro-de-búsqueda-con-ajax-en-django 9/13
8/3/2020 ¿Crear cuadro de búsqueda con Ajax en Django? - entre Desarrolladores
2Como acceder a un schema Oracle con otro usuario diferente en Django (../2598/como-acceder-schema-oracle-con-otro-usuario-diferente-django)
ACTIVIDAD RECIENTE
(https://entredesarrolladores.com/user/Botxtrem-Solutions)
Botxtrem-Solutions (https://entredesarrolladores.com/user/Botxtrem-Solutions)
preguntó hace 1 día
Publicar una entrada en blogger usando la Api V3 y…
(https://entredesarrolladores.com/18172/publicar-una-entrada-en-blogger-usando-la-api-v3-y-php)
(https://entredesarrolladores.com/user/Peter)
Peter (https://entredesarrolladores.com/user/Peter) comentó Feb 28
Dar Formato a números ingresados mediante javascri… (https://entredesarrolladores.com/12576/dar-formato-a-
n%C3%BAmeros-ingresados-mediante-javascript?show=18171#c18171)
(https://entredesarrolladores.com/user/versce123mx)
versce123mx (https://entredesarrolladores.com/user/versce123mx) preguntó Feb 28
consumir url por curl (https://entredesarrolladores.com/18170/consumir-url-por-curl)
(https://entredesarrolladores.com/user/berriosf)
berriosf (https://entredesarrolladores.com/user/berriosf) comentó Feb 27
Dar Formato a números ingresados mediante javascri… (https://entredesarrolladores.com/12576/dar-formato-a-
n%C3%BAmeros-ingresados-mediante-javascript?show=18169#c18169)
(https://entredesarrolladores.com/user/Mustafa)
Mustafa (https://entredesarrolladores.com/user/Mustafa) comentó Feb 23
Capturar valor de un jtable y escribirlo en un jda… (https://entredesarrolladores.com/16805/capturar-valor-de-
un-jtable-y-escribirlo-en-un-jdatechooser?show=18168#c18168)
(https://entredesarrolladores.com/user/Leonardo-Tadei)
Leonardo-Tadei (https://entredesarrolladores.com/user/Leonardo-Tadei) comentó Feb 21
Múltiples computadoras con las mismas claves priva…
(https://entredesarrolladores.com/18164/m%C3%BAltiples-computadoras-con-mismas-claves-privadas-
p%C3%BAblicas?show=18167#c18167)
(https://entredesarrolladores.com/user/Botxtrem-Solutions)
Botxtrem-Solutions (https://entredesarrolladores.com/user/Botxtrem-Solutions)
preguntó Feb 18
Ejecutar función según se cierra la pagina o se da…
(https://entredesarrolladores.com/18165/ejecutar-funci%C3%B3n-seg%C3%BAn-se-cierra-la-
pagina-se-da-clic-enlace)
(https://entredesarrolladores.com/user/Botxtrem-Solutions)
Botxtrem-Solutions (https://entredesarrolladores.com/user/Botxtrem-Solutions)
seleccionó una respuesta Feb 18
Administrar cuenta de twitter afiliada a app (https://entredesarrolladores.com/17807/administrar-
cuenta-de-twitter-afiliada-a-app?show=17809#a17809)
(https://entredesarrolladores.com/user/No%C3%A9+Andr%C3%A9s)
Noé Andrés (https://entredesarrolladores.com/user/Noé Andrés) preguntó
Feb 16
Múltiples computadoras con las mismas claves priva…
(https://entredesarrolladores.com/18164/m%C3%BAltiples-computadoras-con-mismas-
claves-privadas-p%C3%BAblicas)
https://entredesarrolladores.com/6828/crear-cuadro-de-búsqueda-con-ajax-en-django 10/13
8/3/2020 ¿Crear cuadro de búsqueda con Ajax en Django? - entre Desarrolladores
(https://entredesarrolladores.com/user/carlos4124)
¿Cómo llamar dos tablas con un Stored Procedure? (https://entredesarrolladores.com/18163/c%C3%B3mo-
2 llamar-dos-tablas-con-un-stored-procedure)
ULTIMAS PREGUNTAS
PREGUNTAS RELACIONADAS
Como acceder a un schema Oracle con otro usuario diferente en Django (../2598/como-acceder-schema-oracle-con-otro-usuario-diferente-django)
https://entredesarrolladores.com/6828/crear-cuadro-de-búsqueda-con-ajax-en-django 11/13
8/3/2020 ¿Crear cuadro de búsqueda con Ajax en Django? - entre Desarrolladores
USUARIOS TOP
2
Leonardo-Tadei (../user/Leonardo-Tadei)
(https://entredesarrolladores.com/user/Leonardo-Tadei)
227020 Puntos
Peter (../user/Peter)
(https://entredesarrolladores.com/user/Peter)
148230 Puntos
(https://entredesarrolladores.com/user/white)
white (../user/white)
75840 Puntos
(https://entredesarrolladores.com/user/pregunton)
pregunton (../user/pregunton)
20390 Puntos
(https://entredesarrolladores.com/user/AntonioMP) (https://entredesarrolladores.com/user/Frederickmv)
(https://entredesarrolladores.com/user/berriosf) (https://entredesarrolladores.com/user/Rcct_22)
(https://entredesarrolladores.com/user/MoisesNazario) (https://entredesarrolladores.com/user/misterhch)
(https://entredesarrolladores.com/user/luison) (https://entredesarrolladores.com/user/santi2308)
(https://entredesarrolladores.com/user/mapleon19) (https://entredesarrolladores.com/user/Adon)
(https://entredesarrolladores.com/user/carlos4124) (https://entredesarrolladores.com/user/leoberh)
(https://entredesarrolladores.com/user/Ender) (https://entredesarrolladores.com/user/programacionrv)
ETIQUETAS (../Tags)
https://entredesarrolladores.com/6828/crear-cuadro-de-búsqueda-con-ajax-en-django 12/13
8/3/2020 ¿Crear cuadro de búsqueda con Ajax en Django? - entre Desarrolladores
CATEGORÍAS
(../Categories)
2
Consolas (../consolas) 18
Smart TV (../smart-tv) 2
(https://entredesarrolladores.com)
Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.
ETIQUETAS (../Tags)
CATEGORÍAS (../Categories)
Consolas (../consolas) 18
Smart TV (../smart-tv) 2
CONECTA
(https://twitter.com/entredevs) (https://www.facebook.com/entredesarrolladores)
https://entredesarrolladores.com/6828/crear-cuadro-de-búsqueda-con-ajax-en-django 13/13