Автозаполнение ничего не делает. Что не так? - PullRequest
5 голосов
/ 07 апреля 2020

У меня есть автозаполнение кода, который не работает.

У меня есть класс поля ввода Coordinate, где, когда я набираю код, он находит в моей БД значение, которое совпадает с geo_code, и, следовательно, находит страну входного кода.

Поэтому, когда я набираю UK, он совпадает с geo_code, а затем совпадает с последним с country, поэтому в этом случае UK - это код i, который можно найти в geo_code, а страна - United Kingdom. Код работает, я хочу добиться автозаполнения, чтобы давать подсказки при наборе текста. например:

UK   United Kingdom
USA  United States of America

Что я сделал до сих пор:

В models.py У меня есть:

class Coordinate(models.Model):
    code = models.CharField(max_length=150)

class Profiles(models.Model):
    geocode=models.CharField(max_length=200)
    country=models.CharField(max_length=500)
    city=models.CharField(max_length=500)

    class Meta:
        managed=False
        db_table='profiles_country'

    def __str__(self):
        return '{}'.format(self.geocode)

в forms.py :

from dal import autocomplete

class CoordinateForm(forms.ModelForm):
    code= forms.CharField(max_length=150, label='',widget= forms.TextInput)

    class Meta:
        model = Coordinate
        fields = ('__all__')
        widgets = {
            'code': autocomplete.ModelSelect2(url='coordinate-autocomplete')}

в views.py :

class CoordinateAutocomplete(autocomplete.Select2QuerySetView):
        def get_queryset(self):
            if not self.request.user.is_authenticated():
                return Profiles.objects.none()
            qs = Profiles.objects.all()
            if self.q:
                qs = qs.filter(name__istartswith=self.q)
            return qs

в базе. html

<!DOCTYPE html>
{% load static %}

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="{% static 'geoproj/css/main.css' %}">

  </head>
  <body>

    <div>{% block content %}{% endblock  %} 

         {% block javascripts %} {% endblock %} </div>

  </body>
</html>

в гео. html:

{% extends "base.html" %}
{% block content %}

{% if user.is_authenticated %}
            <form enctype="multipart/form-data" method="POST" >
                    {% csrf_token %}
                    {{ form}}
                    {{form.media }}
            <button class = "btn btn-primary" type="submit">OK</button></form>


{% endif %}

{% endblock content %}

{% block javascripts %} {% endblock %}

Буду признателен вам за помощь в решении этого дела.

Ответы [ 3 ]

2 голосов
/ 16 апреля 2020

models.py:

class Coordinate(models.Model):
    code = models.CharField(max_length=150)
    def __str__(self):
        return self.code

class Profiles(models.Model):
    geocode=models.CharField(max_length=200)
    country=models.CharField(max_length=500)
    city=models.CharField(max_length=500)

    class Meta:
        managed=False
        db_table='profiles_country'

    def __str__(self):
        return '{}'.format(self.geocode)

views.py:

def geoview(request):
    if request.method == "POST":
        #do your operations
        return render(request, 'result.html')

    return render(request, 'index.html')


def getgeocode(request, geocode):
    results = Coordinate.objects.filter(code__istartswith=str(geocode))
    sendres = ""
    for resn in results[:10]:
        sendres += "<option class='bg-primary'>" + resn.code + "</option>"
    return HttpResponse(sendres)

index. html:

{% extends 'base.html' %}

{% block content %}
    <form enctype="multipart/form-data" method="POST">
        <input type="text" list="mylist" name="geocodes" id="geocodes" placeholder="enter geocde"
               onkeyup="getGeoCode(this.value)" autocomplete="off"/>
        <datalist id="mylist">
        </datalist>

        <button class="btn btn-primary" type="submit">OK</button>
    </form>
{% endblock content %}
{% block javascripts %}
    <script>
        function getGeoCode(str) {
            if (str.length == 0) {
                document.getElementById("mylist").innerHTML = "";
                document.getElementById("mylist").style.border = "0px";
                return;
            }
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("mylist").innerHTML = this.responseText;
                }
            }
            xmlhttp.open("GET", "/coordinate-autocomplete/" + str, true);
            xmlhttp.send();
        }
    </script>
{% endblock javascripts %}

urls.py:

from django.urls import path
from app import views

urlpatterns = [
    ....
    path('geo/', views.geoview, name='geo'),
    path('coordinate-autocomplete/<geocode>', views.getgeocode, name='coordinate-autocomplete'),
    ....
]

enter image description here

enter image description here

, и вы можете подтвердить, что он работает в вашем терминале. запрос как: /coordinate-autocomplete/{word_in_iput}

[17/Apr/2020 16:19:52] "GET /coordinate-autocomplete/u HTTP/1.1" 200 120
[17/Apr/2020 16:20:03] "GET /coordinate-autocomplete/us HTTP/1.1" 200 65
[17/Apr/2020 16:20:06] "GET /coordinate-autocomplete/u HTTP/1.1" 200 120
[17/Apr/2020 16:20:13] "GET /coordinate-autocomplete/i HTTP/1.1" 200 44
0 голосов
/ 11 апреля 2020

code в CoordinateForm равно CharField , а не ModelChoiceField , поэтому он не работает правильно с QuerySet, возвращаемым автозаполнением.

0 голосов
/ 07 апреля 2020

Я не вижу js, который связывает ответ URL и шаблон HTML. Вот как я это решу. При условии, что ваш вид работает. Вы сгенерируете предложение по

  1. Сначала создайте js прослушиватель событий для получения текста из поля ввода формы
  2. Как только вы получите этот текст, вы сделаете ajax вызов URL-адреса просмотра, о котором вы упомянули
  3. После получения ajax результата вы создадите для l oop и сгенерируете теги выбора для ввода.

Вот так я бы написал код js для связи с шаблоном Html и URL-адресом автозаполнения Django.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...