How do i filter Django list using my bootstrap form?

I have been using Django and its default admin templates for my app. There is a certain list view for which I have decided to create my own bootstrap form for filtering objects. I want the values in the form fields to be used to filter on the queryset. How do I POST the data to Django and tell it to reload the page bearing in mind the choices in the form? Basically, how do I tell Django to "refresh this page" but apply the values in the form to queryset? Here is my code for the customized list

{% extends 'admin/change_list.html' %}

{% load i18n admin_urls static admin_list %}
{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static "admin/css/changelists.css" %}" />

{% if cl.formset %}
<link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}" />
{% endif %}
{% if cl.formset or action_form %}
<script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
{% endif %}
{{ media.css }}
{% if not actions_on_top and not actions_on_bottom %}
<style>
#changelist table thead th:first-child {width: inherit}
</style>
{% endif %}
{% endblock %}

{% block content_title %}
<h1> Activity Summary </h1>
{% endblock %}

{% block object-tools-items %}
{% if has_add_permission %}
{{ block.super }}

<!-- Modal -->
<button type="button" data-toggle="modal" data-target="#filterModal" class="btn btn-primary">Launch modal</button>

<div class="modal fade" id="filterModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Filter</h4>
</div>
<div class="modal-body">

<form>
<div class="form-group">
<label for="user">Users:</label>
<input type="text" class="form-control" id="user">
</div>
<div class="form-group">
<label for="text">Date</label>
<input type="text" class="form-control" id="text">
</div>
<div class="checkbox">
<label><input type="checkbox"> Verified </label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>

{% endif %}
{% endblock %}
{% load humanize %}
{% block result_list %}

<script type="text/javascript">
$(document).ready(function() {
$("#user").autocomplete(
{
minLength: 2,
source: function (request, response)
{
$.ajax(
{
url: "/autocomplete/",
data: {term: request.term},
dataType: "json",
appendTo : "ui-id-1",
success: function (jsonDataReceivedFromServer)
{
//alert (JSON.stringify (jsonDataReceivedFromServer));
// console.log (jsonDataReceivedFromServer);
response ($.map(jsonDataReceivedFromServer, function (item)
{
console.log (item.firstname);
return {
id: item.firstname, value: item.email, label: item.firstname };
}));
}
});
},
});
});
</script>

<div class="results">
<table>

<thead>
<tr>
<th>
<div class="text">
<a href="#">Employee</a>
</div>
</th>
<th>

</table>
</div>

{% endblock %}

{% block pagination %}{% endblock %}

/r/djangolearning
https://redd.it/7d2kaj