Django, JQuery et autocomplete

si vous cherchez dans vos modèles django quelque chose comme:

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

Pour le jQuery autocomplete et appel:

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
    });
}

enfin, pour tout connecter sur votre formulaire d'entrée aurait quelque chose comme:

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

Note, Ceci utilise aussi jQuery UI en plus de stock jQuery.

pendant ce temps, un bon tutoriel est apparu.

autocomplete fait tout pour vous, tout ce que vous avez à faire est la suivante:

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)

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

je suis un grand fan de django-saisie semi-automatique: https://bitbucket.org/tyrion/django-autocomplete/wiki/Home . Il dispose d'un plug-and-play agréable et est très facile à intégrer avec vos propres applications sans beaucoup de codage supplémentaire.

disons que vous voulez configurer autocomplete sur un champ d'entrée (comme <input type="text" id="id_input">) avec le nom d'utilisateur de vos utilisateurs. C'est comme ça que je l'ai fait, et ça a bien fonctionné pour moi.

urls.py

tout d'abord, ajoutez l'url où ajax cherchera

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

views.py

puis définir une vue pour extraire de la base de données les informations que vous besoin d'

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

enfin, vous devez créer une fonction JavaScript qui va dans la base de données et renvoie les noms d'utilisateur qui correspondent à la valeur du champ d'entrée chaque fois que vous appuyez sur (et relâchez) une touche. Pour cela, nous allons utiliser Ajax, JQuery et JQuery-uisaisie semi-automatique de la fonction

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 
                });       
            }
        });        
    });
  });

Et voilà, mon ami! Pour plus d'informations, vous pouvez consulter cette tutoriel

django-saisie semi-automatique-lumière est très belle option. Il est très facile à utiliser et aussi très bien documenté. Lien: https://github.com/yourlabs/django-autocomplete-light

Documentation:https://django-autocomplete-light.readthedocs.org/en/master/

Il y a un chemin sans l'aide de Json:

exemple: supposons que vous avez un modèle nommé Collège:

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

maintenant, render un contexte nommé 'all_colleges' = College.objet.tous les() pour votre modèle:

HTML:

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

JS:

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

Ressources à inclure dans le modèle:

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

C'est ça!

si vous avez besoin d'autocomplete pour montrer options qui commencent avec le terme entré, Modifiez la fonction de filtre autocomplete par défaut en ajoutant cet extrait dans votre template:

 // 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);
    });
  };

Commentaire si vous rencontrez le moindre problème :)

j'ai trouvé que la façon la plus simple pour commencer (bien que probablement pas optimale pour la production) est JQuery Autocomplete Widget.

la manière la plus basique nécessite juste de copier-coller le code dans votre html, en utilisant un tableau comme 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>

Dans django 1.10-je utiliser le même code

url:

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

vue:

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