Добавить функцию автозаполнения w3school в поле формы django - PullRequest
Новая
       10

Добавить функцию автозаполнения w3school в поле формы django

0 голосов
/ 03 марта 2020

Я хочу добавить функцию w3school.com для автозаполнения в одно из моих полей формы django. Сначала я использовал простую форму html, и она работала, но после реализации 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 . Я думаю, это как-то связано с классом автозаполнения. Может быть, он неправильно назначен в forms.py? Идентификатор поля в main. js должен быть правильным в соответствии с документацией django и моими тестами. Надеюсь, вы можете помочь мне, большое спасибо заранее.

1 Ответ

1 голос
/ 03 марта 2020

Всегда лучше использовать библиотеку для достижения функции автозаполнения, чем использовать некоторый код из 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">

После реализации это должно делать именно то, что вы хотите.

...