Listing: Client-side Filter, Search Field and Select Django - 17

We are going to implement here the fields or the form that we are going to use to make the request to the server to the Django view or controller if we follow the MVC then here we are going to create it well in the block here we place it it is going to be a form here the action would not need to be implemented if we leave it empty it means that it will call itself:

<form class="row">

That is to say, on the same page, which is exactly what we want. The type of method would not need to be implemented either, by default it should be get, but I am going to put it here to make it clear:

<form method="get" class="row">

The rest would be the fields, which in this example are 2, one for search and another for a selection list:

<form method="get" class="row">


    <div class="col-auto">
        <input type="text" name="search" class="form-control" placeholder="Search">
    </div>
    <div class="col-auto">
        <select name="category_id" class="form-select">
            <option value="">Categories</option>
            {% for c in categories %}
            <option value={{c.id}}>
                {{c.title}}
            </option>
            {% endfor %}
        </select>
    </div>
    <div class="col-auto">
        <button type="submit" class="btn btn-primary">Search</button>
    </div>
</form>