Listado: Filtro en el cliente, Campo de busqueda y Select Django - 17

Vamos a implementar por acá los campos o el formulario que nosotros vamos a utilizar para hacer la petición al servidor a la vista o controlador de Django si seguimos el MVC entonces por acá vamos a crearlo bueno en el bloque por aquí lo colocamos va a ser formulario aquí el action no haría falta implementarlo si lo dejamos vacío significa que se va a llamar a sí mismo:

<form class="row">

Es decir a la misma página que es justamente lo que queremos el tipo de método tampoco haría falta implementarlo por defecto debería serc el get pero lo voy a colocar aquí para que quede claro:

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

El resto sería los campos, que en este ejemplo son 2, uno de busqueda y otro para un listado de selección:

<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>

Acepto recibir anuncios de interes sobre este Blog.

Vamos a implementar las opciones del filtro en el cliente, el campo de búsqueda y la categoría.

- Andrés Cruz

In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos Curso y Libro desarrollo web con Django 5 y Python 3 + integración con Vue 3, Bootstrap y Alpine.js.

) )