如何在Django Admin中实现自动补全

2023-04-11 00:00:00 django admin 如何在

在Django Admin中实现自动补全，需要使用jQuery UI Autocomplete插件和Django的ajax视图。以下是详细步骤：

  1. 安装jQuery和jQuery UI Autocomplete插件

在Django应用的static目录下，创建一个新目录js，并将jquery和jquery-ui.min.js以及jquery-ui.css文件拷贝到该目录中。

  1. 新建Django Ajax视图

在Django应用中创建一个新的views.py文件，用于处理自动补全的Ajax请求。

from django.http import JsonResponse
from django.views.decorators.http import require_GET
from myapp.models import MyModel

@require_GET
def get_autocomplete_data(request, model_name):
    term = request.GET.get('term', '')
    model = apps.get_model(app_label='myapp', model_name=model_name)
    objects = model.objects.filter(name__icontains=term)[:10]

    results = []
    for obj in objects:
        obj_dict = {}
        obj_dict['id'] = obj.pk
        obj_dict['label'] = obj.name
        obj_dict['value'] = obj.name
        results.append(obj_dict)

    return JsonResponse(results, safe=False)

get_autocomplete_data函数接收一个model_name参数，来指定要搜索的模型。视图首先获取term参数，用于过滤模型数据。然后使用模糊查询来获取符合条件的模型实例，最后将结果转换为JSON格式返回给前端。

  1. 注册Ajax视图

将视图添加到Django应用的urls.py文件中。（需要自行引入APP所在包的函数包）

from django.urls import path
from myapp import views

urlpatterns = [
    path('autocomplete/<str:model_name>/', views.get_autocomplete_data, name='autocomplete-data'),
]
  1. 模板代码

在Django Admin的模板中添加以下代码。在文本框中输入字符，将会发起Ajax请求自动补全。

{% extends "admin/base.html" %}

{% block extrahead %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'js/jquery-ui.css' %}">
    <script src="{% static 'js/jquery-ui.min.js' %}"></script>
    <script>
        $(document).ready(function() {
            $('.autocomplete').autocomplete({
                source: "/admin/autocomplete/myapp.MyModel/", // Ajax URL
                delay: 500, // delay before Ajax request
                minLength: 3, // minimum length of input
                select: function(event, ui) {
                    $('#id_field_name').val(ui.item.id); // set the id value
                }
            });
        });
    </script>
{% endblock %}

{% block content %}
    <h1>MyModel Admin</h1>
    <div class="autocomplete">
        <input type="text" id="id_name" name="name" value="{{ object.name }}" autocomplete="off">
        <input type="hidden" id="id_field_name" name="field_name" value="{{ object.field_name }}">
    </div>
{% endblock %}

在模板中添加JQuery UI Autocomplete的库和样式文件，然后初始化autocomplete插件。

source选项指定Ajax URL，代表要向哪个URL发起Ajax请求来获取数据，这里传入的是/admin/autocomplete/myapp.MyModel/，即我们之前注册的视图的URL。

delay选项表示在用户停止输入500ms后才发起Ajax请求；minLength选项表示输入框中的最小字符数，这里设置为3个字符；select选项定义了当用户选择一个自动补全的项目时要执行的动作。

模板代码中的autocomplete类是我们为搜索框添加的一个CSS类，可以根据具体情况进行修改。

相关文章