Django 给forms中的TextInput组件 增加输入文字时,下方提示和输入文字匹配的内容列表 具体用代码怎么实现
时间: 2023-05-21 14:02:22 浏览: 163
使用JQuery UI完成可输入内容且自动匹配的的下拉列表
5星 · 资源好评率100%
您可以使用 Django 自带的 AutoCompleteTextInput 组件来实现这个功能。以下是示例代码:
```python
from django import forms
from django.urls import reverse_lazy
from dal import autocomplete
class MyForm(forms.Form):
my_field = forms.CharField(
widget=autocomplete.ModelSelect2(
url=reverse_lazy('my-autocomplete-url'),
attrs={
'data-placeholder': 'Type here...',
'data-minimum-input-length': 2,
},
),
)
```
其中,`my_field` 是您要添加自动完成功能的表单字段。`autocomplete.ModelSelect2` 是一个自动完成组件,它可以从指定的 URL 加载匹配的选项。在这个例子中,我们使用了 `reverse_lazy` 函数来获取 URL,这个 URL 是在 `urls.py` 中定义的自动完成视图的 URL。
您需要在 `urls.py` 中定义一个视图来处理自动完成请求。以下是示例代码:
```python
from django.urls import path
from dal import autocomplete
from .models import MyModel
class MyModelAutocomplete(autocomplete.Select2QuerySetView):
def get_queryset(self):
qs = MyModel.objects.all()
if self.q:
qs = qs.filter(name__icontains=self.q)
return qs
urlpatterns = [
path('my-autocomplete-url/', MyModelAutocomplete.as_view(), name='my-autocomplete-url'),
]
```
在这个例子中,我们使用了 `dal.autocomplete.Select2QuerySetView` 类来处理自动完成请求。`get_queryset` 方法返回一个查询集,它包含了与用户输入匹配的选项。在这个例子中,我们使用了 `name__icontains` 来匹配模型中的名称字段。
最后,您需要在模板中使用表单。以下是示例代码:
```html
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Submit</button>
</form>
```
这个表单将显示一个文本框,当用户输入时,下方会显示匹配的选项列表。
阅读全文