Выбор объектов из модели 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.