Выбор объектов из модели django на основе пользовательского ввода

У меня есть большая модель django, содержащая около 800 объектов, и я хочу создать представление, в котором пользователь может выбрать определенное количество этих объектов, чтобы передать их другому представлению для дальнейшей обработки. Тот факт, что в модели так много объектов, делает перечисление всех объектов очень непрактичным, поскольку пользователю придется прокручивать 800 объектов.

Для решения этой проблемы я хочу разместить панель поиска в верхней части представления, чтобы пользователь мог вводить названия объектов и выбирать их, щелкая по ним. Когда объекты выбраны, они должны появляться под панелью поиска в виде тегов, которые пользователь может удалить, нажав на "x" рядом с каждым из них.

Когда пользователь сделал все необходимые выделения, он должен иметь возможность нажать кнопку и перейти к следующему представлению, где эти выделенные объекты доступны.

Модель, которую я использую, можно упростить следующим образом:

class Song():
    song_name = models.CharField(max_length=256)
    song_author = models.CharField(max_length=256, blank=True)
    song_content = models.TextField()

    def __str__(self):
        return self.song_name
    
    class Meta:
        ordering = ['song_order']

    song_order = models.PositiveIntegerField(editable=False, db_index=True)

На данный момент я смог сделать представление для поиска по модели.

mytemplate.html

<!DOCTYPE html>
{% load static %}
<html style="height: 100%;" lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" as="style" onload="this.rel='stylesheet'">
    <link rel="preload" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" as="style" onload="this.rel='stylesheet'">
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
</head>
<body>


{% block body_block %}
    <div class="container" style="padding-bottom:40px;margin-top: 35px;">   
        <div class="form-group">
            <label for="searchInput" class="bmd-label-floating">Search</label>
            <input type="text" class="form-control" id="searchInput" oninput="filter()">
        </div>
        <ul class="list-group bmd-list-group-sm">
            {% for song in songs %}
                <div
                    class="list-group-item"
                    data-title="{{song.song_name}}"
                    data-author="{{song.song_author}}"
                    data-lyrics="{{song.song_content}}">
                <h4>
                    {{song.song_name}}
                    {% if song.song_author %}
                        ({{ song.song_author }})
                    {% endif %}
                </h4>
                </div>
            {% endfor %}
        </ul>
    </div>

    <script>

    $('#searchInput').focus();

    function short(s) {
        let punctuationRegEx = /[.,\/#!$%\^&\*;:{}=\-_`~()]/g;
        return s.replace(punctuationRegEx, '')
                .toLowerCase()
                .normalize("NFD")
                .replace(/[\u0300-\u036f]/g, "");
    }

    function filter() {
        let f = short($('#searchInput').val());
        $('.list-group-item').each(function (index) {
            if (short($(this).data('title') + "").includes(f) ||
                short($(this).data('author') + "").includes(f)
            ) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }
    </script>

{% endblock %}


</body>
</html>

views.py

class SongListView(ListView):
    context_object_name = 'songs'
    model = Song
    template_name = "songapp/mytemplate.html"

Есть идеи, как сделать отбор?

Я создал программу инвентаризации деталей с поиском по мере ввода.
Это полный пример ajax вызова для поиска и базы данных.
Вы можете изменить его, чтобы показать результаты под поиском с помощью X.

https://github.com/edcodes/Django-Parts-Inventory

Вернуться на верх