将 w3school 自动完成功能添加到 django 表单字段

Question

我想添加使用表单和模型的 w3school.com autocomplete functionality to one of my django form fields. At first I used a simple html form and it worked, but after implementing the django-way，我无法再使用自动完成功能。这是我的代码的相关部分：

forms.py

class PlantForm(forms.ModelForm):
class Meta:
    model = Plant
    fields = ('plantname')
    widgets = {
        'plantname': forms.TextInput(attrs={'placeholder': 'Trage hier den Namen des gelieferten Produkts ein.',
                                            'class': 'autocomplete',
                                            'autocomplete': 'off'}),

models.py

class Plant(models.Model):
     plantname = models.CharField(max_length=255)

main.js

const plants = ["Strauß", "Pepperoni", "Physalis", "Aster"];

window.onload = function () {
    autocomplete(document.getElementById("id_plantname"), plants);
};

index.html

<link rel="stylesheet" href= "{% static 'xyz/index.css' %}">
<script src="{% static 'xyz/main.js' %}"></script>

<form autocomplete="off" method="post">
 {% csrf_token %}
    {{ form|crispy }}
 <button type="submit" class="btn btn-primary">Eintragen</button>
</form>

css和js代码是从w3schools tutorial复制粘贴的。我想这与自动完成 class 有关。也许是在forms.py中赋值错误？根据 django 文档和我的测试，main.js 中字段的 id 应该是正确的。希望您能帮助我，在此先感谢您。

Answer 1

最好使用库来实现自动完成功能，而不是使用 w3school 的一些代码。

使用 jQuery 并以更少的代码高效地实现相同的功能

首先，创建一个 some_file.json 并保留要用于自动完成的数据。例如

{
    "something" : null
}

导入 jQuery 并将以下代码添加到您的 x.js 文件中。更改它以满足您的需要。

    $.getJSON('/static/some_dir/x.json', function(data_) {
        $('input.autocomplete').autocomplete({
            data: data_,
            limit: 20,
            minLength: 2
        });
    });

在 x.html 文件中，如下定义输入标签

<input title="something" type="text" class="autocomplete" autocomplete="off">

一旦实施，这应该完全符合您的要求。

将 w3school 自动完成功能添加到 django 表单字段

Add w3school autocomplete functionality to django form field

django

autocomplete

django-models

django-forms

python-3.x