Django 表单的自动完成

Django 表单自动完成是根据用户输入来自动匹配已有数据，以减少用户输入的时间和工作量，提高用户体验。

Django 提供了多种方式实现表单自动完成，例如：

1. 使用第三方库：Django-autocomplete-light、django-select2、django-ajax-selects 等，这些库提供了自动完成的基本实现和文档，用户只需根据自己的需求进行配置即可。

2. 自行实现：通过 Ajax 和视图函数实现自动完成，关键步骤如下：

a) 编写前端代码：在表单控件上绑定 keyup 事件，当用户输入内容时向后端发送 Ajax 请求，并将输入的值作为参数。

示例代码：

$("#input-box").keyup(function(event) {
var keyword = $(this).val();
$.ajax({
url: "/autocomplete/",
type: "get",
data: {
"keyword": keyword
},
success: function(json) {
// 处理后端返回的数据
}
});
});

b) 编写视图函数：根据用户输入的值查询数据库，并将匹配的结果以 JSON 格式返回。

示例代码：

from django.http import JsonResponse
from django.shortcuts import render
from .models import User

def autocomplete(request):
keyword = request.GET.get("keyword")
results = User.objects.filter(name__icontains=keyword)[:10] # 模糊查询
data = []
for item in results:
data.append({"id": item.id, "text": item.name})
return JsonResponse(data, safe=False)

c) 编写模板代码：将返回的 JSON 数据显示在下拉列表中供用户选择。

示例代码：

以上示例代码是通过 select2 库实现自动完成的，其它库的实现方法可能不同，但基本思路相同。

示例数据：

User.objects.create(name="pidancode.com")
User.objects.create(name="皮蛋编程")

最终效果是：用户在输入框中输入“皮”，则自动显示下拉菜单，其中包含“皮蛋编程”这一选项。