自动完成什么都不做。怎么了？答案

【问题标题】：Autocomplete does nothing. What is wrong?自动完成什么都不做。怎么了？
【发布时间】：2020-07-19 13:26:42
【问题描述】：

我的自动完成代码不起作用。

我有输入字段类坐标，当我输入代码时，它会从我的数据库中找到与 geo_code 匹配的值，从而找到输入代码国家。

所以当我输入UK 时，它与geo_code 匹配，然后将最后一个与country 匹配，所以在这种情况下，英国是我输入的代码，它可以在geo_code 中找到，国家是英国。该代码有效，我想要实现的是在打字时带来自动完成功能以提供建议。例如：

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

在 base.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>

在 geo.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 %}

感谢您帮助解决此案。

【问题讨论】：

你好伙计，你为什么不用javascript？据我所知，你不能只用 django 做到这一点，因为这是一个前端问题，后端不处理数据，同时不发送给它。希望对您有所帮助，注意安全。

标签： python mysql django django-models autocomplete

【解决方案1】：

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'),
    ....
]

您可以确认它在您的终端中运行，您将看到如下请求： /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

【讨论】：

不正确。有效答案基于我上面在问题中编写的代码。
@Günel 你希望自动完成功能在不使用 javasript 的情况下使用 django 表单吗？
我现在在移动设备上，所以无法发送格式正确的代码，但您可以这样做...添加 autocomplete:false 像：attrs={ 'theme': 'bootstrap','autocomplete':'false'} in attr of form
这将禁用在浏览器中建议缓存值
一段时间后，我将发布一些带有 javascript 和 ajax 的代码，我相信它会起作用

【解决方案2】：

CoordinateForm 中的

code 字段是 CharField，而不是 ModelChoiceField，因此它无法与自动完成返回的 QuerySet 一起正常工作。

【讨论】：

ModelChoiceField 提供下拉菜单 - 这不是我想要的

【解决方案3】：

我没有看到链接 URL 响应和 HTML 模板的 js。在这里我将如何解决它。前提是您的观点有效。您将通过

生成建议

首先创建一个js事件监听器从输入框获取文本表格
收到此文本后，您将对视图 URL 进行 ajax 调用你提到了
获得 ajax 结果后，您将创建一个 for 循环并为输入生成选择标签。

这就是我编写 js 代码以与 Html 模板和 Django 自动完成视图 URL 通信的方式。

【讨论】：

这不是我的问题。我知道什么是静态文件，我的问题专门链接到自动完成以及如何与 js 结合，在我的案例中插入什么代码，因为其他代码对我不起作用。
对此很抱歉，但请更新您的问题以反映确切的代码、视图和模型。目前尚不清楚您要说什么。自动完成@Günel
哦，好吧，现在我明白了。
那么您现在在哪里，您是否像在示例中那样将 JS 放入脚本标签中。之后发生了什么？
这对您有帮助吗？ @Günel