Django, jQuery, y de autocompletar

Después de una investigación extensa (buscar en Google), no puedo encontrar un tutorial actual sobre cómo configurar la función autocompletar utilizando Django y jQuery. Parece que existe una gran variedad de plugins y parece ser que no hay consistencia o estándar acerca de que el uso o cuando.

Yo no soy un pro en cualquiera de Django o jQuery, pero necesita un autocompletar solución que está bien documentado y bastante sencillo de utilizar.

Sugerencias?

InformationsquelleAutor malandro95 | 2011-02-22

10 Kommentare

  1. 17

    Si usted está buscando para buscar dentro de sus modelos de django entonces algo como:

    from django.utils import simplejson
        def autocompleteModel(request):
        search_qs = ModelName.objects.filter(name__startswith=request.REQUEST['search'])
        results = []
        for r in search_qs:
            results.append(r.name)
        resp = request.REQUEST['callback'] + '(' + simplejson.dumps(result) + ');'
        return HttpResponse(resp, content_type='application/json')

    Para el jQuery autocomplete y llame a:

    function searchOpen() {
        var search = $('#txtSearch').val()
        var data = {
            search: search
        };
        $.ajax({
            url: '/search.json',
            data: data,
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'searchResult'
        });
    }
    
    
    function searchResult(data) {
        $( "#txtSearch" ).autocomplete ({
            source: data
        });
    }

    Finalmente a conectar todo en su formulario de entrada tendría algo como:

    <input type="text" name="search" id="txtSearch" onkeyup="searchOpen()" />

    Nota, que esto es usando Jquery interfaz de usuario además de las acciones de jQuery.

    • simplejson es obsoleto y no disponible en la última Djangos: docs.djangoproject.com/en/1.8/internals/deprecation
    • Hola, se puede explicar de donde puedo poner la /search.json archivo?
    • No entiendo por qué la gente incluso intente con django-autocompletar. He perdido cerca de dos horas tratando de conseguir que funcione. Esto es mucho mejor y le da mucho más control sobre el código.
  2. 7

    Mientras tanto, un buen tutorial apareció.

    autocomplete lo hace todo por usted, todo lo que tienes que hacer es lo siguiente:

    js

    $(function() {
      $("#search-field").autocomplete({
        source: "/ajax_calls/myFunction",
        minLength: 2,
      });
    });

    urls.py

    url(r'^ajax_calls/myFunction/', 'my_app.views.handler_function'),

    views.py

    def get_drugs(request):
    
        if request.is_ajax():
            .....
            data = json.dumps(results)
        else:
            data = 'fail'
        mimetype = 'application/json'
        return HttpResponse(data, mimetype)

    FUENTE:
    http://flaviusim.com/blog/AJAX-Autocomplete-Search-with-Django-and-jQuery/

    • Seguido el tutorial. Aunque los resultados son devueltos, que no aparecen en la lista downdown bajo la entrada. Ver a mi pregunta aquí: stackoverflow.com/questions/31617931/…
    • Tomó también un tiempo para mí para hacer el trabajo, y un adicional de la pregunta en la. Una vez que me di cuenta de cómo hacerlo, he probado a hacer un paso a paso de la explicación que se espera que sea útil para los demás.
    • Si el campo de entrada- ‘campo de búsqueda’ estaban dentro de un formulario, ¿cómo puedes hacerlo?
  3. 4

    Soy un gran fan de django-autocompletar: https://bitbucket.org/tyrion/django-autocomplete/wiki/Home . Su conseguido un buen plug-and-play y es muy fácil de integrar con sus propias aplicaciones sin mucho adicionales de codificación.

    • Miré a django-autocompletar, y me pareció una buena manera de ir. Yo no podía entender cómo integrarlo a mi forma y plantilla, aunque. Las instrucciones no ir tan lejos.
  4. 3

    Digamos que usted desea configurar la función autocompletar en algún campo de entrada (como <input type="text" id="id_input">) con el nombre de usuario de los usuarios. Esta es la forma en que yo lo hice, y funcionó sin problemas para mí.

    urls.py

    Primero de todo, agregar la url donde ajax buscará

    url(r'^ajax/autocomplete/$', views.autocomplete, name='ajax_autocomplete')

    views.py

    A continuación, establezca una vista para recuperar de la base de datos de la información que usted necesita

    from django.http import JsonResponse
    
    def autocomplete(request):
        if request.is_ajax():
            queryset = User.objects.filter(username__startswith=request.GET.get('search', None))
            list = []        
            for i in queryset:
                list.append(i.username)
            data = {
                'list': list,
            }
            return JsonResponse(data)

    JavaScript

    Por último, usted necesita para hacer una función de JavaScript que ir a la base de datos y devolver el nombre de usuario que coincida con el valor del campo de entrada cada vez que pulse (y libertad) una clave. Para ello, vamos a utilizar Ajax, JQuery y la JQuery-ui‘s función de autocompletar

    jQuery(function() {
        $("#id_input").on('keyup', function(){
            var value = $(this).val();
            $.ajax({
                url: "{% url 'ajax_autocomplete' %}",
                data: {
                  'search': value 
                },
                dataType: 'json',
                success: function (data) {
                    list = data.list;
                    $("#id_input").autocomplete({
                    source: list,
                    minLength: 3 
                    });       
                }
            });        
        });
      });

    Y eso, mi amigo! Para obtener más información, usted puede comprobar fuera de este tutorial

  5. 1

    django-autocompletar-la luz es muy buena opción. Es muy fácil de usar y también se documenta muy bien.
    Enlace: https://github.com/yourlabs/django-autocomplete-light

    Documentación: https://django-autocomplete-light.readthedocs.org/en/master/

    • Bienvenido a Desbordamiento de Pila! Mientras que este vínculo puede responder a la pregunta, es mejor incluir a las partes esenciales de la respuesta aquí y proporcionar el enlace de referencia. Enlace-sólo respuestas puede ser válido si la página enlazada cambios. Consulte ¿Cómo puedo escribir una buena respuesta.
    • Shirsath, Los documentos sólo muestran cómo habilitar para la administración de los propósitos. Hay un ejemplo donde lo puedo ver normal de la aplicación en lugar de admin?
    • Aquí está el enlace del tutorial de django-autocompletar de luz: youtube.com/watch?v=fJIHiqWKUXI
  6. 0

    Hay una manera sin el uso de Json:

    ejemplo: supongamos que usted tiene un modelo denominado Colegio:

    class College(models.Model):
        collegeName = models.CharField(max_length=250)
        def __str__(self):
            return self.collegeName

    Ahora, rendir un contexto denominado ‘all_colleges’ = Universidad.objetos.todos() a su plantilla:

    HTML:

    <input type="text" id="college"/>

    JS:

      $( function() {
        var availableColleges = [
          {% for clg in all_colleges %}
              "{{clg}}",
          {%endfor%}
        ];
        $( "#clg" ).autocomplete({
          source: availableColleges
        });
      } );

    Recursos para ser incluido en la plantilla:

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

    Que es!

    Si usted necesita de autocompletar para mostrar las opciones que comienzan con el término introducido, modificar el filtro predeterminado de autocompletar función de filtro mediante la adición de este fragmento de código en su plantilla:

     // over write the default autocomplete function to match the option starting with entered term 
      $.ui.autocomplete.filter = function (array, term) {
        var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
        return $.grep(array, function (value) {
          return matcher.test(value.label || value.value || value);
        });
      };

    Comentario si te enfrentas a cualquier problema 🙂

  7. 0

    He encontrado que la manera más sencilla para empezar (aunque probablemente no sea la óptima para la producción) es con JQuery Autocomplete Widget.

    La forma más básica sólo requiere copiar-pegar el código en el html, utilizando una matriz como un source:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Autocomplete - Cities example</title>
      <link href="style.css" rel="stylesheet">
    
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    </head>
    
    <body>  
    <div class="ui-widget">
      <label for="tags">Cities: </label>
      <input id="tags">
    </div>
    
    <script>
        $( function() {
          var availableTags = [
              'Barcelona',
              'Berlin',
              'London',
              'Madrid',
              'Rome',
              'Paris'
          ];
          $( "#tags" ).autocomplete({
            source: availableTags
          });
        } );
    </script>
    
    </body>
    </html>
  8. 0

    En django 1.10 puedo usar el mismo código

    url:

    # Ajax
        url(r'^search-autocomplete/$', autocompleteModel,  name='search-autocomplete'),

    vista:

    def autocompleteModel(request):
        search_qs = Account.objects.filter(email__startswith=request.GET['search'])
        results = []
        for r in search_qs:
            results.append(r.email)
        resp = request.GET['callback'] + '(' + simplejson.dumps(results) + ');'
        return HttpResponse(resp, content_type='application/json')

    js:

    $(document).ready(function () {
        function searchOpen() {
            var search = $('#countryId').val();
            $.ajax({
                url: '/cabinet/search-autocomplete',
                dataType: 'jsonp',
                type: 'GET',
                async: false,
                data: injectCsrfToken({
                    search: search
                }),
                success: function (data) {
                    searchResult(data)
                },
                error: function () {
                    console.log('error');
                }
    
            });
        }
        function searchResult(data) {
            console.log('sdfsdfd');
            $( "#countryId" ).autocomplete ({
                source: data
            });
        }
        $("#countryId").on('keyup', function () {
            searchOpen();
        });
    });

    html:

    <input id="countryId" type="text" name="fname">
  9. 0

    Sé que la implementación de jQuery autocomplete es difícil. Aquí es un ejemplo de trabajo para Django > 2.0:

    Paso 1: Crear un HTML simple con una entrada (no te olvides de añadir enlaces a cargar jQuery y jquery-ui). Guardar el código como testsearch.html

    <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> 
    </head>
    <div class="ui-widget">
      <label for="search"> Search </label>
      <input id="search">
    </div>

    Paso 2: Agregar un código JavaScript en el código html. Se llama a la función autocomplete de jquery-ui. Esta función utiliza una fuente que la dirección URL para las llamadas Ajax

    <script type="text/javascript">
    $(function() {
      $("#search").autocomplete({
        source: "{% url 'project:ajax_load_project' %}",
        minLength: 2,
      });
    });
    </script>

    Paso 3: Ahora tenemos que crear dos funciones. Una función simple para representar testsearch.html y otro que recibe las llamadas Ajax y enviar de nuevo los datos.

    def ajax_load_project(request):
        if request.is_ajax():
            q = request.GET.get('term', '')
            print(q)
            projects = Project.objects.filter(title__istartswith=q)[:5]
            results = []
            for project in projects:
                project_json = {}
                project_json['id'] = project.id
                project_json['value'] = project.title
                project_json['label'] = project.title
                results.append(project_json)
            data = json.dumps(results)
        else:
            data = 'fail'
        mimetype = 'application/json'
        return HttpResponse(data, mimetype)
    
    def searchProject(request):
        template = 'project/testsearch.html'
        return render(request, template)

    Proyecto es mi modelo. Se puede reemplazar con su Modelo. Sustituir el título con el campo que se utiliza para la búsqueda.

    Para mi ejemplo, puede crear este sencillo Modelo:

    class Project(models.Model):
        """
        A Model representing a the project.
        """
        title = models.CharField(max_length=200)

    Paso 4: no olvides incluir dos URLs. Uno para el HTML y el uno para llamadas Ajax

    urlpatterns += [
        #test search
        path('SuggestProject/', views.ajax_load_project, name='ajax_load_project'),
        path('searchtest/', views.searchProject, name='searchProject'),]
  10. 0

    Me parece https://www.w3schools.com/howto/howto_js_autocomplete.asp tutorial para ser bueno. El tutorial utiliza una estática países de la matriz de la que la función de autocompletar selecciona las respuestas(desplegable de elementos).

    Ahora a hacer el mismo más dinámica que podemos agregar simple ajax de jQuery llamado a una Django vista.

    var countries;
    $.ajax({
        url : '/autocomplete_view';
        data : {'query':$('#query').val()};
        type : 'GET',
        success : function(response){
            countries = JSON.parse(response);
            // do something extra
        },
        failure : function(response){
            // do something here
        },
        async : false
    });

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea