Django 给forms中的TextInput组件 增加输入文字时,下方提示和输入文字匹配的内容列表 具体用代码怎么实现
时间: 2023-05-22 07:05:19 浏览: 99
可以使用 Django 自带的 Autocomplete 功能来实现这个需求,具体步骤如下:
1. 安装 Django 官方提供的 autocomplete_light 库,可以使用 pip 命令进行安装:
```
pip install django-autocomplete-light
```
2. 在 forms.py 文件中,定义 TextInput 组件的表单模型,并使用 `autocomplete_light.TextWidget` 替换默认的组件:
```python
from django import forms
from autocomplete_light import TextWidget
class MyForm(forms.ModelForm):
my_field = forms.CharField(
label='My field',
widget=TextWidget('ModelAutocomplete')
)
```
3. 在 views.py 文件中,定义 AutocompleteModelView 展示组件,并将它注册到路由中:
```python
from autocomplete_light import AutocompleteModelView
from myapp.models import MyModel
class MyModelAutocomplete(AutocompleteModelView):
model = MyModel
search_fields = ['name', 'description']
urlpatterns = [
url(r'^autocomplete/', include('autocomplete_light.urls')),
]
```
4. 在 HTML 模板中,引入 autocomplete_light 库的 CSS 和 JS 文件,并使用 AutocompleteWidget 标签将表单元素和 AutocompleteModelView 绑定在一起:
```html
{% extends "base.html" %}
{% load autocomplete_light %}
{% block content %}
<h1>My form</h1>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
{% autocomplete_light %}
<button type="submit">Submit</button>
</form>
{% endblock %}
```
这样就可以实现 TextInput 组件下方提示和输入文字匹配的内容列表的功能。更详细的信息可以参考 Django 官方文档中关于 Autocomplete 的介绍。
阅读全文