Autocomplete through a selected external key (Django) - django

Question

I have a query and I have 2 models, one called Detalleventa and Producto
class DetalleVenta(models.Model):
producto = models.ForeignKey(Producto,on_delete=models.CASCADE,verbose_name='Producto')
cantidad = models.IntegerField(verbose_name='Cantidad')
preciounit = models.DecimalField(decimal_places=2, max_digits=7, verbose_name='Precio unitario')
subtotal = models.DecimalField(decimal_places=2, max_digits=7, verbose_name='Subtotal')
venta = models.ForeignKey(Venta,on_delete=models.CASCADE, related_name='detalleventa', verbose_name='Venta')
def __str__(self):
return '{} - {}'.format(self.venta,self.producto)
class Producto(models.Model):
nombre = models.CharField(max_length=30,unique=True,verbose_name='Nombre de Producto:')
precio = models.DecimalField(decimal_places=2, max_digits=7, verbose_name='Precio de Producto:')
categoria = models.ForeignKey(Categoria,on_delete=models.CASCADE,verbose_name='Categoría:')
def __str__(self):
return self.nombre
And in my Detalle forms.py I have:
class DetalleForm(forms.ModelForm):
class Meta:
model = DetalleVenta
fields = [
'producto',
'cantidad',
'preciounit',
'subtotal',
]
labels = {
'producto':'Producto',
'cantidad':'Cantidad',
'preciounit':'Prec.Unit.',
'subtotal':'Subtotal',
}
widgets = {
'producto':forms.Select(attrs={'class':'form-control'}),
'cantidad':forms.NumberInput(attrs={'class':'form-control cantidad'}),
'preciounit':forms.NumberInput(attrs={'class':'form-control'}),
'subtotal':forms.NumberInput(attrs={'class':'form-control subtotal', 'readonly':True}),
}
DetalleFormSet = inlineformset_factory(Venta, DetalleVenta,
form=DetalleForm, extra=1)
As you can see in the details form, I have a priceunit field that refers to the price of the product that is in the product model and my question is: is there any way in my details template when selecting, for example, a product X ? ? (external key product) autocomplete its respective price in the input of preciounit?
This is my template:
{% extends 'base/base.html' %}
{% load static %}
{% block titulo%} Registrar venta {%endblock%}
{% block contenido %}
<div class="col-md-12">
<form method="post">{% csrf_token %}
<div class="col-md-4 form-group">
<label class="font-weight-bold" for="{{form.cliente.name}}">{{form.cliente.label}}</label>
{{form.cliente}}
</div>
<h4 class="text-left">Detalle de venta: </h4>
<div class="table-responsive-sm">
<table class="table" id="tablaDetalle">
{{ detalleformset.management_form }}
<thead class="thead-dark">
<th>Producto</th>
<th width="100px">Cantidad</th>
<th width="115px">Prec.Unit.</th>
<th width="115px">Subtotal</th>
<th>Acción</th>
</thead>
<tbody>
{% for form in detalleformset.forms %}
<tr class="formset_row">
{% for field in form.visible_fields %}
<td>
{# Include the hidden fields in the form #}
{% if forloop.first %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% endif %}
{{ field.errors.as_ul }}
{{ field }}
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="row justify-content-md-end">
<div class="col-md-2">
<label class="font-weight-bold" for="{{form.total.name}}">{{form.total.label}}</label>
{{form.total}}
</div>
</div>
<div class="form-group">
<label class="font-weight-bold" for="{{form.descripcion.name}}">{{form.descripcion.label}}</label>
{{form.descripcion}}
</div>
<div class="col-md-4 offset-md-4">
<button class="btn btn-block btn-lg btn-primary" type="submit"><span><i class="fa fa-shopping-cart"></i>
</span>Registrar venta</button>
</div>
</form>
</div>
{% endblock %}
As you know, it's for a small sales system and I have to get the price of the product. If there is a way to be able to do what has been proposed? or at least a clue to discover how to do it?