栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何使用Django在表单中创建自动完成输入字段

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何使用Django在表单中创建自动完成输入字段

我终于按照此处找到的说明进行了自动完成搜索

https://github.com/xcash/bootstrap-autocomplete


https://bootstrap-autocomplete.readthedocs.io/en/latest/

它非常易于使用,不需要安装任何应用程序,

settings.py
并且对bootstrap 3和bootstrap 4都适用。

还有许多其他软件包可用,但这对我来说很简单。

我将解释我使用的代码

page.html

{% block script %}    <script src="https://cdn.rawgit.com/xcash/bootstrap-autocomplete/3de7ad37/dist/latest/bootstrap-autocomplete.js"></script>    <script>        $('.basicAutoComplete').autoComplete( {minLength: 1}        );        $('.dropdown-menu').css({'top': 'auto', 'left': 'auto'})    </script>{% endblock %}.....{% if field.name == "from_email" %}   {% render_field field  %}{% else %}   {% render_field field  %}{% endif %}

autoComplete
是执行该操作所调用的函数,并
minLength
在执行提取操作之前指定了文本的最小长度。我添加了额外的CSS来修复自动完成下拉菜单,否则很奇怪。

Jinja渲染器不断从视图覆盖类定义,因此我添加了if检查。

urls.py

from . import viewsurlpatterns = [    .    .    .    path('email_autocomplete/', views.email_autocomplete, name='email_autocomplete')]

将此行添加到

urls.py

表格

class LeaveForm(forms.Form):    from_email = forms.EmailField(required=True, widget=forms.TextInput(        attrs={ 'style': 'width: 400px', 'class': 'basicAutoComplete', 'data-url': "/domain/email_autocomplete/"        }))

上面是中输入字段的代码

forms.py
。data-url指向将在其中生成JSON结果的位置。

views.py

from django.http import HttpResponse, HttpResponseRedirect, JsonResponsefrom .models import modeldef email_autocomplete(request):    if request.GET.get('q'):        q = request.GET['q']        data = model.objects.using('legacy').filter(email__startswith=q).values_list('email',flat=True)        json = list(data)        return JsonResponse(json, safe=False)    else:        HttpResponse("No cookies")

这对我来说是最令人困惑的部分。GET请求很容易理解,但是花了一些时间才能将数据

model.objects
转换为JSON格式的对象。诀窍是使用

values_list('columnName',flat=True)

从数据库中过滤数据时,然后使用转换为列表

list(data)
,最后使用
JsonResponse
将其转换为JSON。

希望这对想要简单自动完成的任何人有帮助



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/653354.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号