0

me encuentro haciendo un buscador con ajax y django que me arroje resultados en cuanto escriba una palabra en el buscador pero no e tenido éxito. supuestamente ya tengo todo.

en la consola me muestra esto cuando hago una búsqueda.

[25/Apr/2016 20:25:22] "GET /clientes/list/ HTTP/1.1" 200 16400
[25/Apr/2016 20:25:22] "GET /static/js/ajax_buscar.js HTTP/1.1" 304 0

cree un app llamada ajax donde le paso el modelo Cliente para aceder asu objetos. views.py

from django.shortcuts import render
from django.http import HttpResponseBadRequest, HttpResponse, HttpRequest

from django.core import serializers
import re

from clientes.models import Cliente

def search(request):

# si no es una peticion ajax, devolvemos error 400
if not request.is_ajax() or request.method != "POST":
    return HttpResponseBadRequest()

# definimos el termino de busqueda
q = request.POST['q']

#verificamos si el termino de busqueda es un documento de identidad
match = re.match(r'^(?P<CI>[0-9]{2,})$', q)
isCI = (False, True)[match != None]

# generamos la query
if isCI:
    clientes = Cliente.objects.filter(id=match.groupdict()['id'])
else:
    clientes = Cliente.objects.filter(n_empresa__Icontains=q)

# seleccionamos las columnas que deseamos obtener para el json
cliente_fields = (
    'id',
    'n_empresa',        
    'email'
)

# json!
data = serializers.serialize('json', clientes, fields=cliente_fields)


return HttpResponse(data, content_type="application/json")

ajax_buscar.js

    function __init()
{

$('#search_input')
    .val('')
    .focus()
    .keyup(function(){

        if(!$.trim($(this).val()))
            $('.results .error').empty().hide();
    });

var cache = {};
$('#search_input').autocomplete({
    minLength: 5,
    select: function( event, ui ) {
        return false;
    },
    open: function() {
        $('.results .wrapper').html($(this).autocomplete("widget").html());
        $(this).autocomplete("widget").hide();
    },
    source: function( request, response ) {

        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 clientes = [];

                for(var x in data)
                {
                    clientes.push({
                        id : data[x].fields['id'],
                        n_empresa : data[x].fields['n_empresa'],
                        email : data[x].fields['email']
                    });
                }

                cache[request.term] = clientes;
                response(clientes);
            }
        });
    },
    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) {

    var cliente_tmpl = $('<div />')
                    .addClass('Cliente')
                    .append('<a href="/" />').find('a').addClass('id').html(item.id)
                    .parent()
                    .append('<span class="identity"><strong>Identidad:</strong><span></span></span>')
                    .find('.identity > span').append(item.n_empresa)
                    .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(cliente_tmpl)
        .appendTo(ul);
};
}

$(document).ready(__init);

mi html

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

<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>

mi urls.py

from ajax.views import search

url(r'^ajax/search/', view='ajax.views.search'),
5
  • No veo donde incluyes la librería para el autocompletado. Parece que fuera jquery UI <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> el 26 abr. 2016 a las 2:00
  • amigo agregue la librería que colocaste y sigue si hacer nada
    – wootsbot
    el 26 abr. 2016 a las 2:05
  • Bueno más que agregar la librería que yo coloqué, cual es la librería que tu estas utilizando? yo supuse que era esa. Por otro lado, te muestra algún mensaje de error? Haz intentado con algo mucho más sencillo, para entender como funciona? el 26 abr. 2016 a las 2:09
  • tienes razón, pero exactamente esa librería es la que utilizo, no e probado con algo mas pequeño
    – wootsbot
    el 26 abr. 2016 a las 2:10
  • Entremos a este chat para hablar mejor chat.stackexchange.com/rooms/38887/ajax-autocomplete el 26 abr. 2016 a las 2:17

1 respuesta 1

0

Efectivamente lo resolví con un ejemplo mas pequeño. quedo asi. views.py

import json

from django.http import HttpResponse, HttpResponseRedirect, HttpResponseForbidden
from django.shortcuts import render, render_to_response
from django.template import RequestContext

from .models import Producto

def ListaProductos2(request):
if request.is_ajax:
    search=request.GET.get('start','')

    productos=Producto.objects.filter(nombre__icontains=search)

    results=[]
    for producto in productos:
        producto_json={}
        producto_json['id']=producto.id
        producto_json['nombre']=producto.nombre
        producto_json['descripcion']=producto.descripcion
        results.append(producto_json)

    data_json=json.dumps(results)

else:
    data_json='fail'
mimetype="application/json"
return HttpResponse(data_json,mimetype)

urls.py

from productos import views
urlpatterns = [
url(r'^con_ajax_cadena/$',views.ListaProductos2),
]

index.html

<div class="ui-widget">
  <label for="tags1">Array de Cadenas: </label>
  <input id="tags1">
 </div>

JavaScript

$(function(){
  function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
      var thisHeight = $(this).height();
      if(thisHeight > tallest) {
        tallest = thisHeight;
      }
    });
    group.height(tallest);
  } 
  equalHeight($(".box-1 .inner"));


  $("#tags4").autocomplete({
    minLength:3,
    source: function(req, add){
      var search=$("#tags4").val();
      $.ajax({
        url:'/con_ajax_cadena/',
        async:false,
        dataType:'json',
        type:'GET',
        data:{ 'start': search,},
        success: function(data){
          var suggestions=[];

          $.each(data, function(index, objeto){
            suggestions.push(objeto.nombre); 
          });

          add(suggestions);
        },
        error:function(err){
          alert("error");
        }
      });
    }
  });


});

recursos

Jquery-UI

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.