Блог

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

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

#python #html #jquery #django #django-models

#python #HTML #jquery #django #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 = /[.,/#!$%^amp;*;:{}=-_`~()]/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"

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

Ответ №1:

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

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

Комментарии:

1. Спасибо, но эта часть — это именно то, что я уже реализовал. Часть, которая меня больше интересует, касается выбора результатов и отображения их в виде тегов в строке поиска. Если у вас есть какие-либо предложения, пожалуйста, дайте мне знать!

Метки: