根据用户输入从 django 模型中选择对象答案

【问题标题】：Select objects from django model based on user input根据用户输入从 django 模型中选择对象
【发布时间】：2023-03-19 20:26:01
【问题描述】：

我有一个包含大约 800 个对象的大型 django 模型，我想创建一个视图，用户可以在其中选择一定数量的这些对象以传递给另一个视图以进行进一步处理。模型中有这么多对象的事实使得列出所有对象非常不切实际，因为用户必须滚动浏览 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"

关于如何进行选择的任何想法？

【问题讨论】：

标签： python html jquery django django-models

【解决方案1】：

我已经创建了一个零件库存程序，当您键入搜索时。
这是一个完整的 ajax 调用搜索和数据库示例。
您可以修改它以使用 X 在搜索下显示结果。

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

【讨论】：

谢谢，但这部分正是我已经实现的。我更感兴趣的部分是关于选择结果并使它们在搜索栏下显示为标签的部分。如果您有任何建议，请告诉我！