# Django autocomplete filter

**URL:** <https://forum.djangoproject.com/t/django-autocomplete-filter/24842>\
**Category:** Forms & APIs\
**Created:** [October 27, 2023, 7:20pm UTC](https://forum.djangoproject.com/t/django-autocomplete-filter/24842 "2023-10-27T19:20:07Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arnold927](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/arnold927/32/16670_2.png) [@Arnold927](https://forum.djangoproject.com/u/Arnold927)\
**Post date:** [October 27, 2023, 7:20pm UTC](https://forum.djangoproject.com/t/django-autocomplete-filter/24842/1 "2023-10-27T19:20:07Z")

</div>

Hi everyone,  
I have a model class (InputSubsidy) in an app (input). This class has “farmInput”, “marketPrice”, “percentageSubsidy”, “startDate” and “endDate” fields. “farmInput” field is a foreign key from the FarmInput model app in the input app. Additionally, I have another class (InputRequestAuthorization) in an app(FarmManagement). InputRequestAuthorization has the fields “inputRequest”, “amountByCounty” and “amountByFarmer”. InputRequestAuthorization class inherits the InputSubsidy class. Both the InputRequest and InputSubsidy models have objects displayed in their respective admin interface. Since InputRequestAuthorization inherits the InputSubsidy class, on the admin interface, all the fields from InputSubsidy are displayed on the InputRequestAuthorization admin interface. I am using django and I want to auto-populate the InputSubsidy and InputRequestAuthorization models on the InputRequestAuthorization admin interface whn I click on one object item in the “farmInput” dropdown field. These fields include “marketPrice”, “percentageSubsidy”, “startDate”, “endDate”, “inputRequest”, “amountByCounty”, “amountByFarmer” fields in the InputRequestAuthorization class in the admin interface. There are multiple objects with the same value for farmInput. I will appreceiate any help on how to autocomplete these field values.

My model.py files are:

```auto
class InputRequestAuthorization(InputSubsidy):
    inputRequest = models.ForeignKey(InputRequest, on_delete=models.CASCADE, verbose_name='Input Request')
    amountByCounty = models.SmallIntegerField(verbose_name='Amount by County')
    amountByFarmer = models.SmallIntegerField(verbose_name='Amount by Farmer')
    authorized= models.BooleanField()

    def __str__ (self):
        return str(self.farmInput)

class InputSubsidy(models.Model):
    farmInput= models.ForeignKey(FarmInput, on_delete=models.CASCADE, verbose_name='Farm Input')
    marketPrice= models.SmallIntegerField(verbose_name='Market price')
    percentageSubsidy=models.FloatField(max_length=100, verbose_name='Percentage Subsidy')
    startDate= models.DateField(verbose_name='Start Date')
    endDate= models.DateField(verbose_name='Start Date')

    class Meta:
        verbose_name= 'Input Subsidy'
        verbose_name_plural= 'Input Subsidies'

    def __str__ (self):
        return str(self.farmInput)

```

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [October 27, 2023, 7:50pm UTC](https://forum.djangoproject.com/t/django-autocomplete-filter/24842/2 "2023-10-27T19:50:48Z")

</div>

Side note: When you post code here, please enclose the code between lines of three backtick - ` characters. This means you’ll have a line of ```, then the code, then another line of ```. This forces the forum software to keep your code properly formatted. (I’ve taken the liberty of editing your original post.)

---

<div class="post-metadata">

**Author:** ![Arnold927](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/arnold927/32/16670_2.png) [@Arnold927](https://forum.djangoproject.com/u/Arnold927)\
**Post date:** [October 27, 2023, 7:55pm UTC](https://forum.djangoproject.com/t/django-autocomplete-filter/24842/3 "2023-10-27T19:55:27Z")

</div>

Thank you. I didn’t know about the three backticks

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [October 27, 2023, 8:20pm UTC](https://forum.djangoproject.com/t/django-autocomplete-filter/24842/4 "2023-10-27T20:20:26Z")

</div>

The general pattern to implement something like this is to write a JavaScript function to catch the “change” event on the `farmInput` field, and pass that value to a new Django view. This view that you need to write will return the necessary values for the corresponding fields in the form. Your JavaScript function would then update the form with the data returned by the view.

(Note: This is pretty much the standard process for updating fields based upon a value entered in a different field. This isn’t a technique specific to the Django admin.)

---

<div class="post-metadata">

**Author:** ![Arnold927](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/arnold927/32/16670_2.png) [@Arnold927](https://forum.djangoproject.com/u/Arnold927)\
**Post date:** [October 27, 2023, 9:54pm UTC](https://forum.djangoproject.com/t/django-autocomplete-filter/24842/5 "2023-10-27T21:54:24Z")

</div>

I am using `XMLHttpRequest` to send a GET request to a new Django view . Then, passing the value of `farmInput` as a query parameter. The view will return a JSON object containing the necessary values for the corresponding fields in the form. The problem is that the value of form fields aren’t updating.

```auto
function updateForm() {
    var farmInput = document.getElementById("farmInput").value;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/get-input-data?farmInput=" + farmInput, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            document.getElementById("marketPrice").value = data.marketPrice;
            document.getElementById("percentageSubsidy").value = data.percentageSubsidy;
            document.getElementById("startDate").value = data.startDate;
            document.getElementById("endDate").value = data.endDate;
            document.getElementById("inputRequest").value = data.inputRequest;
            document.getElementById("amountByCounty").value = data.amountByCounty;
            document.getElementById("amountByFarmer").value = data.amountByFarmer;
        }
    };
    xhr.send();
}

```

---

<div class="post-metadata">

**Author:** ![Arnold927](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/arnold927/32/16670_2.png) [@Arnold927](https://forum.djangoproject.com/u/Arnold927)\
**Post date:** [October 27, 2023, 9:56pm UTC](https://forum.djangoproject.com/t/django-autocomplete-filter/24842/6 "2023-10-27T21:56:29Z")

</div>

Here’s my view

```auto
from django.http import JsonResponse
from input.models import InputSubsidy

def get_input_data(request):
    farm_input = request.GET.get('farmInput')
    input_subsidy = InputSubsidy.objects.filter(farmInput=farm_input).first()
    if input_subsidy:
        data = {
            'marketPrice': input_subsidy.marketPrice,
            'percentageSubsidy': input_subsidy.percentageSubsidy,
            'startDate': input_subsidy.startDate,
            'endDate': input_subsidy.endDate,
        }
        return JsonResponse(data)
    else:
        return JsonResponse({})

```

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [October 27, 2023, 10:29pm UTC](https://forum.djangoproject.com/t/django-autocomplete-filter/24842/7 "2023-10-27T22:29:54Z")

</div>

Check **everything**

Check the exchange of data in the browser’s developer tools network tab. Make sure the right url is being sent and that the response contains the right data.

Second, inspect the data being returned. Does `data` actually contain the object you’re expecting it to have?

Finally, verify that your updates should work by manually testing it in your browsers console. In other words, try something like:  
`document.getElementById("marketPrice").value = 5;`  
to see if the form has been updated. If it isn’t, then you may need to verify what the `id` attributes are of the form you’re trying to update.