Features: 1) Add required static asset links for Select2 styles and scripts; 2) Enhance autocomplete list filter with improved styles and functionality;

Fixes: 1) Fix indentation inconsistencies in HTML template;

Extra: 1) Refactor inline script for improved readability;
This commit is contained in:
Egor Pavlovich Gorbunov 2025-07-01 19:11:01 +03:00
parent efcbfea825
commit 1116d6c602

View file

@ -1,27 +1,34 @@
{% load i18n static %} {% load i18n static %}
<link rel="stylesheet"
href="{% static 'admin/css/vendor/select2/select2.css' %}"/>
<link rel="stylesheet"
href="{% static 'admin/css/autocomplete.css' %}"/>
<script src="{% static 'admin/js/vendor/select2/select2.full.js' %}"></script>
<script src="{% static 'admin/js/jquery.init.js' %}"></script>
<script src="{% static 'admin/js/autocomplete.js' %}"></script>
<div class="filter-autocomplete"> <div class="filter-autocomplete">
<select name="{{ spec.lookup_kwarg }}" <select
id="id_{{ spec.lookup_kwarg }}" name="{{ spec.lookup_kwarg }}"
class="admin-autocomplete" id="id_{{ spec.lookup_kwarg }}"
style="width:90%;" class="admin-autocomplete"
data-ajax--url="{{ spec.autocomplete_url }}" style="width:90%;"
data-app-label="{{ spec.app_label }}" data-ajax--url="{{ spec.autocomplete_url }}"
data-model-name="{{ spec.model_name }}" data-app-label="{{ spec.app_label }}"
data-field-name="{{ spec.field_name }}" data-model-name="{{ spec.model_name }}"
data-allow-clear="true" data-field-name="{{ spec.field_name }}"
data-placeholder="{% blocktrans with label=spec.field_label %}Search by {{ label }}…{% endblocktrans %}"> data-allow-clear="true"
data-placeholder="{% blocktrans with label=spec.field_label %}Search by {{ label }}…{% endblocktrans %}">
{% if spec.lookup_val %} {% if spec.lookup_val %}
<option value="{{ spec.lookup_val }}" selected>{{ spec.initial_text }}</option> <option value="{{ spec.lookup_val }}" selected>{{ spec.initial_text }}</option>
{% endif %} {% endif %}
</select> </select>
</div> </div>
<link rel="stylesheet" href="{% static 'admin/css/autocomplete.css' %}"/>
{# Only our own bootstrap script, using django.jQuery #}
<script> <script>
(function ($) { (function($) {
$('.admin-autocomplete').djangoAdminSelect2(); $('.admin-autocomplete').djangoAdminSelect2();
})(django.jQuery); })(django.jQuery);
</script> </script>