Django, jQuery und automatische Vervollständigung

Nach ausgiebiger Recherche (Googeln) kann ich kein aktuelles Tutorial finden, wie man Autocomplete mit Django und jQuery einrichtet. Es scheint eine Vielzahl von Plugins zu geben, und es scheint keine Einheitlichkeit oder keinen Standard dafür zu geben, welche zu verwenden sind und wann.

Ich bin kein Profi in Django oder jQuery, brauche aber eine Autocomplete-Lösung, die gut dokumentiert und ziemlich einfach zu verwenden ist.

Anregungen?

Wenn Sie innerhalb Ihrer Django-Modelle suchen möchten, dann so etwas wie:

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

Für die automatische Vervollständigung und den Aufruf von jQuery:

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

Schließlich, um alles in Ihrem Eingabeformular zu verbinden, würde es so aussehen:

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

Beachten Sie, dass dies zusätzlich zu Standard-jQuery auch die Jquery-Benutzeroberfläche verwendet.

Inzwischen ist ein gutes Tutorial erschienen.

autocomplete erledigt alles für Sie, Sie müssen lediglich Folgendes tun:

js

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

urls.py

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

Ansichten.py

def get_drugs(request):

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

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

Angenommen, Sie möchten die automatische Vervollständigung für ein Eingabefeld einrichten (z <input type="text" id="id_input">) mit dem Benutzernamen Ihrer Benutzer. So habe ich es gemacht:

urls.py

Fügen Sie zunächst eine URL hinzu, die vom AJAX-Aufruf verwendet wird.

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

Ansichten.py

Stellen Sie dann eine Ansicht ein, um die Informationen (dh in diesem Fall die Benutzernamen) aus der Datenbank abzurufen

from django.http import JsonResponse

def autocomplete(request):
    if request.is_ajax():
        username_query = request.GET.get('username_query', '')
        usernames = (User.objects
                     .filter(username__startswith=username_query)
                     .values_list('username', flat=True))
        data = {
            'usernames': usernames,
        }
        return JsonResponse(data)

JavaScript

Schließlich müssen Sie eine JavaScript-Funktion erstellen, die zur Datenbank geht und jedes Mal, wenn Sie eine Taste drücken (und loslassen), die Benutzernamen zurückgibt, die mit dem Wert des Eingabefelds übereinstimmen. Dafür werden wir verwenden Ajax, JQuery und die JQuery-uidie Autocomplete-Funktion von

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

Und das ist es! Weitere Informationen finden Sie hier Lernprogramm

Ich bin ein großer Fan von Django-Autocomplete: https://bitbucket.org/tyrion/django-autocomplete/wiki/Home . Es hat ein nettes Plug-and-Play und ist sehr einfach mit Ihren eigenen Apps ohne viel zusätzliches Codieren zu integrieren.

Ich weiß, dass die Implementierung der automatischen Vervollständigung von jQuery schwierig ist. Hier ist ein funktionierendes Beispiel für Django > 2.0:

Schritt 1: Erstellen Sie ein einfaches HTML mit einer Eingabe (vergessen Sie nicht, Links hinzuzufügen, um jQuery und jquery-ui zu laden). Speichern Sie den Code als 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>

Schritt 2: Fügen Sie dem HTML-Code einen JavaScript-Code hinzu. Es ruft die Funktion autocomplete von jquery-ui auf. Diese Funktion verwendet eine Quelle, die die URL für Ajax aufruft

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

Schritt 3: Jetzt müssen wir zwei Funktionen erstellen. Eine einfache Funktion zum Rendern von testsearch.html und eine andere, die Ajax-Aufrufe empfängt und Daten zurücksendet.

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)

Projekt ist mein Modell. Sie können es durch Ihr Modell ersetzen. Ersetzen Sie den Titel durch das Feld, das für die Suche verwendet wird.

Für mein Beispiel können Sie dieses einfache Modell erstellen:

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

Schritt 4: Vergessen Sie nicht, zwei URLs anzugeben. Eine für HTML und eine für Ajax-Aufrufe

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

django-autocomplete-light ist eine sehr schöne Option. Es ist sehr einfach zu bedienen und auch sehr gut dokumentiert. Verknüpfung: https://github.com/yourlabs/django-autocomplete-light

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

ich finde https://www.w3schools.com/howto/howto_js_autocomplete.asp Tutorial gut sein. Das Tutorial verwendet ein statisches Länder-Array, aus dem die Autocomplete-Funktion die Antworten (Dropdown-Elemente) auswählt.

Um dasselbe dynamischer zu machen, können wir nun einen einfachen jQuery-Ajax-Aufruf zu einer Django-Ansicht hinzufügen.

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