Есть ли способ добавить автозаполнение адресов в формы django?

Я пытаюсь использовать api автозаполнения адреса и хочу использовать django forms для сохранения адреса в базе данных.

формы:

class AdressInputForm(forms.ModelForm):
class Meta:
    model = AdressInput
    fields = '__all__'

просмотров:

def new(request):
    if request.method == 'POST':
        form = AdressInputForm(request.POST)
        form.save()
    else:
        form = AdressInputForm()

    return render(request, 'example_app/index.html', {'form': form})

html:

<div class="autocomplete-container" id="autocomplete-container"></div>

css:

body {
    font: 16px;
    background: #f3f5f6;
}

.autocomplete-container {
    margin-bottom: 20px;
    margin-right: 50%;
}

.input-container {
    display: flex;
    position: relative;
}

.input-container input {
    flex: 1;
    outline: none;
    
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 10px;
    padding-right: 31px;
    font-size: 16px;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1);
    border-top: none;
    background-color: #fff;

    z-index: 99;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
}

.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: rgba(0, 0, 0, 0.1);
}

.autocomplete-items .autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: rgba(0, 0, 0, 0.1);
}

.clear-button {
    color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    
    position: absolute;
    right: 5px;
    top: 0;

    height: 100%;
    display: none;
    align-items: center;
}

.clear-button.visible {
    display: flex;
}

.clear-button:hover {
    color: rgba(0, 0, 0, 0.6);
}

js:

В html, css и js поле ввода выглядит так:


Есть ли способ подключить csv и js к формам django и сохранить их в базе данных? (Я скопировал код из учебника api).
Спасибо

Похоже, вы на правильном пути. Если вы хотите использовать javascript для вызова API вместо стандартных шаблонов django, вам может быть проще создать собственный вызов API с помощью чего-то вроде django-rest-framework. Это может быть излишеством в зависимости от того, чего вы пытаетесь достичь, но это вариант!

Возможно, более простым способом будет убедиться, что вы вызываете конечную точку API, которую вы создали в своих представлениях, после того, как пользователь предоставил свой адрес.

Вот краткая информация о том, как сделать запрос в Axios:

    let data = new FormData();
    
    data.append("title", document.getElementById('title').value)  
    data.append("note", document.getElementById('note').value)
    data.append("csrfmiddlewaretoken", '{{csrf_token}}')
    
    axios.post('register_address/', data)
     .then(res => alert("Form Submitted"))
     .catch(errors => console.log(errors))

Более подробно о запросах axios здесь.

Вернуться на верх