django ajax下拉框搜索,Django实现jquery select2带搜索的下拉框

最近在开发一个web应用中需要用到带搜索功能下拉框,曾经尝试网上的django 包, django-select2-forms, 这是款功能强大的packets, 可惜不支持我的开发环境centos+python3.7+django 2.0.2, 只好下载原生jquery select2 ,通过参考官方文档,多次测试最终实现了简单的带搜索功能下拉框,它根据在前端搜索框输入的字符,ajax调用后台的试图函数查询数据库,然后将查询结果返回给前端生成下拉框列表。

aaaee3e571b54e2f611ad34d94bde9c5.png

1,前端代码

请选择系统-------

$('#user_list').select2({

minimumInputLength: 3,

ajax:

{

url: "/deviceman/ajax_get_user_list",

dataType: 'json',

type: 'GET',

delay: 250,

data: function (params) {

return {

search: params.term,

}

},

processResults: function (data) {

return {

results: data

};

},

cache: true

},

});

2, 后台视图函数

def ajax_get_user_list(request):

"""

AJAX数据源视图-系统模块

"""

start = int(request.GET.get('iDisplayStart', '0'))

length = int(request.GET.get('iDisplayLength', '30'))

search = request.GET.get('search', '')

current_office=request.session.get('officename')

#取得前台控件输入的关键字

if search:

#截取查询结果对象,以start开始截取start+length位

orgs = user_list.objects.filter( (Q(full_name__icontains=search) | Q ( email_address__icontains=search))&Q(dept_list__dept_name__icontains=current_office)).values('id').annotate(text=F('full_name')).exclude(user_status='inactive')

else:

orgs = user_list.objects.all().values('id').annotate(text=F('full_name'))

# val_list = []

# for org in orgs:

# val_list.append({'id': org.id, 'text': org.full_name})

# #根据关键字查询得到结果后开始拼装返回到前台的数据。先生成字典型数组,一般SELECT2组件使用的话生成id、text两个字段即可

ret=list(orgs)

result = json.dumps(ret)

return HttpResponse(result)

到此这篇关于Django实现jquery select2带搜索的下拉框的文章就介绍到这了,更多相关Django实现jquery select2带搜索的下拉框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

django3.1的admin中加入jQuery单选下拉树dropdown Combo tree Select widget 需求中有一个字段要从近两千行分层数据中选择底级数据,在主界面用React+(Antd TreeSelect)+Django-Rest的组合解决非常简单,支持的特性也很丰富。 https://ant.design/components/tree-select-cn/ 唯一不足的是不支持XP下chrome最高的49.0.2623.112版本。于是想只在django3.1的admin中也提供一个修改入口,但是在网上搜来搜去,居然没找到一篇文章讲django admin中如何支持下拉树型组件。 网上高手们提 阅读详情

相关推荐

基于Python+Django的京东商品比价系统:从爬虫到Web应用的全栈实践

网络爬虫作为自动化数据采集的核心技术,其原理在于模拟浏览器行为,向目标网站发送HTTP请求并解析返回的HTML文档,从而高效提取结构化信息。这项技术在现代数据驱动决策中价值显著,尤其在电商领域,通过实时抓取商品价格、库存及评价数据,为消费者提供精准的比价服务,辅助其做出更经济的购物选择。Django框架以其“开箱即用”的特性,为快速构建此类数据驱动的Web应用提供了强大支持,其内置的ORM、Admin后台和MTV模式,极大地简化了从数据处理到前端展示的开发流程。本系统正是这一技术组合的典型应用,它利用Pyt

weixin_30460489的博客 367

Django 简单实现分页与搜索功能的示例代码

假设现有需求如下: 需要一个页面分页展示信息,在该页面添加搜索框以提供检索功能。 那么,我们知道,展示信息和检索功能是在同一个页面,也就是共用一个路由。 代码如下: 第一步,写路由:为了清晰,这里只给出主页和展示页面的路由。 urls.py: from django.urls import path from . import views from django.conf.urls.static import static from django.conf import settings from django.contrib.staticfiles.urls import staticfi

Python+Django构建施工项目资料数字化管理系统:架构设计与实战指南

在数字化转型浪潮中,企业级文档管理与业务流程的深度结合成为提升运营效率的关键。其核心原理在于通过结构化的数据模型、精细化的权限控制和自动化的工作流引擎,将传统静态文件转化为可关联、可追溯的动态数字资产。这一技术架构的价值在于打通信息孤岛,实现数据驱动的决策支持。在工程建筑、项目管理等强流程性行业,此类系统能有效解决资料散乱、协同困难、版本失控等痛点。本文聚焦于施工行业,探讨如何利用Python与Django框架,结合ORM、Admin后台及权限系统等热词技术,构建一个贴合分部工程验收、材料报验等专业场景的数

weixin_30466039的博客 345

django ajax 查询,Django分页和Ajax查询

Django中,实现分页以在多个页面上显示查询项目是非常简单的。使用Ajax仅更新实际发生更改的页面位,而不是每次加载整个页面也是非常直接的。但是,当我们将两者结合在一起时,我发现它有点问题。Django分页和Ajax查询在下面的示例中,搜索结果应显示在相应的result_list.html中。{{ form.as_p }}{% include "result_list.html" %}resu...

weixin_35381903的博客 377

Django搜索功能的下拉框

原本只做了一个下拉框,后面随着数据越来越多,选择数据就变得很困难。考虑再下拉框中再增加一个搜索功能。 方法一:django-select2-forms 可以参考官方文档设置: https://pypi.org/project/django-select2-forms/2.0.2/ 不过对py3和django3的支持不好,会产生报错,所以我放弃了这个方法。 方法二:使用jquery2 select2 可以参考:https://blog.csdn.net/qq_42469759/article.

黑面狐 4508

django-select2-forms

django实现select2效果 效果图: pip install django-select2-forms 在settings里面加上 INSTALLED_APPS = ( # ... 'select2', ) urls里面加上 urlpatterns = patterns('', # ... url(r'^selec...

weixin_30480583的博客 502

OpenCloud 索引基石:blevesearch zapx/v13 ZAP 段文件格式完全解析

本文以 `vendor/github.com/blevesearch/zapx/v13` 模块的官方文档为骨架,完整剖析 ZAP(Zap Advanced Postings)段文件格式的二进制布局、逆向写入策略与 mmap 随机读取路径,并结合 zapx/v13 源码([write.go](https://link.gitcode.com/i/011e3e0aee7bea137085e76971d

gitblog_00019的博客 542

jquery select2 搜索功能下拉框插件在Django web开发中的应用

最近在开发一个web应用中需要用到搜索功能下拉框,曾经尝试网上的django 包, django-select2-forms, 这是款功能强大的packets, 可惜不支持我的开发环境centos+python3.7+django 2.0.2, 只好下载原生jquery select2 ,通过参考官方文档,多次测试最终实现了简单的搜索功能下拉框,它根据在前端搜索框输入的字符,ajax调用后台的...

心如海的博客 2768

Django Easy Select2 使用教程

Django Easy Select2 使用教程 1. 项目介绍 django-easy-select2 是一个轻量级的 Django 应用,旨在为 Django 项目中的选择输入小部件(如 ForeignKeyField)提供 Select2 小部件。Select2 是一个强大的 JavaScript 库,能够将普通的 <select> 元素转换为功能丰富的选择框,支持搜索、分页、远...

gitblog_00395的博客 684

Jquery-Select2控件使用心得

本文转载自:https://www.cnblogs.com/heromoli/p/3820555.html 作者:heromoli 转载请注明该声明。前段时间使用了Select2控件处理下拉菜单,搞了一整天才搞明白,记录下心得。参考官网http://ivaynberg.github.io/select2/#documentation 该控件我使用了两种方式:1、基本用法;2AJAX用法。 ...

CHCH998的博客 338

ajax的auto是true,GitHub - sjrd/django-ajax-selects: jQuery UI-powered auto-complete fields for Foreign...

Enables editing of ForeignKey, ManyToMany and CharField using jQuery UI Autocomplete.User experienceselecting:selected:[Note: screen shots are from the older version. Styling has changed slightly]The ...

weixin_30313409的博客 355

Django中,如果你有一个包含多个外键字段的ModelForm,并且你希望为这些外键字段提供搜索框以便用户可以更容易地选择相关的记录,你通常需要使用自定义的表单字段或者第三方小部件(widgets

并且你希望为这些外键字段提供搜索框以便用户可以更容易地选择相关的记录,你通常需要使用自定义的表单字段或者第三方小部件(widgets)来实现。这是一个为Django设计的自动补全库,它可以很容易地为你的外键字段添加自动补全功能。然后,你需要编写JavaScript来处理用户的输入、发送搜索请求、处理响应并更新搜索结果列表。如果你不想使用第三方库,你可以编写自己的JavaScript和CSS来创建一个搜索功能的小部件。配置是可选的,并且需要你有一个返回JSON的搜索API。在你的模板中,你需要初始化。

pptt6688的博客 263

Django企业知识管理系统毕业设计全解析

企业知识管理系统是现代企业信息化建设的重要组成部分,它通过文档管理、权限控制和协作功能等模块实现知识的有效积累与共享。基于Django框架开发这类系统具有明显优势,其内置的ORM系统简化了数据库操作,RBAC权限机制满足企业级安全需求,而MTV架构则保证了代码的可维护性。在技术实现上,结合Django ORM的select_related查询优化和文件存储策略,能有效提升系统性能。这类项目特别适合作为计算机专业毕业设计选题,既能展示Python Web开发的全栈能力,又涵盖了文档版本控制、Elasticse

weixin_30572613的博客 379

autocomplete的模糊查询

在网上找了很多资料发现都是很久之前发的,而且很多都是将搜索数据写在前端,那么数据量大这样做是不太现实的。还有的就是利用select下拉框实现,这种方式也是有局限性。最后选择使用jQuery UI的autocomplete特性,为用户输入的股票代码提供智能提示。当用户开始输入时,它会从服务器获取可能的匹配项,并展示给用户选择。如果你输入一个字、拼音或部分代码,搜索框会显示加载相关内容的下拉列表的效果,并给出可能的股票名称或代码,就像百度京东这样的搜索框一样的效果。

qq_57398168的博客 387

基于Django的多媒体资料管理系统设计与实现

Web开发中的内容管理系统(CMS)是管理数字资产的核心平台,其技术实现涉及前后端协同、数据库设计和文件存储策略。Django框架凭借其强大的ORM系统、内置Admin后台和灵活的MVC架构,成为开发企业级CMS的首选方案。在多媒体管理场景下,系统需要解决文件集中存储、元数据管理和权限控制等关键技术问题。通过Django的FileField字段和Pillow库可以高效处理图片视频等多媒体文件,而MySQL数据库则提供了处理大规模元数据的高性能查询能力。这类系统广泛应用于教育机构资源库、企业数字资产管理等场景

weixin_34288121的博客 545

html五编写视屏_Python Django+SQL+Pandas+Pyecharts自建在线数据分析平台(五)

本篇是系列文章的第5篇,之前的更新见:(一)需求分析&技术实现(二)初步搭建Django环境(三)页面布局&Django模板(四)SQL+Pandas初步处理数据(五)前端表单交互(六)Ajax异步传参与加载(七)前端数据格式的处理(八)DataTables接管前端表格(九)Pyecharts实现交互图表(十)静态图表的展示(十一)“导出数据至Excel”功能(十二)添加和配置缓存...

weixin_42516668的博客 269

Django视图层核心组件与开发实践详解

Django视图层作为Web开发的核心组件,负责处理HTTP请求与响应。其核心原理是通过HttpRequest对象封装请求数据,HttpResponse对象生成响应内容,实现业务逻辑与表现层的解耦。在技术实现上,Django提供了函数视图(FBV)和类视图(CBV)两种模式,支持RESTful API开发、模板渲染等常见场景。通过CSRF防护、查询优化和缓存策略等技术手段,可显著提升Web应用的安全性和性能。这些特性使Django视图层特别适合构建需要快速迭代的中大型Web项目,如电商平台、内容管理系统等。

weixin_33862993的博客 353
上一篇: win10修改update服务器地址,如何在windows10中指定内联网更新服务位置
下一篇: 腾达fh450虚拟服务器,腾达(Tenda)FH450路由器设置上网方法
weixin_39582480
博客等级 码龄9年 30粉丝 129原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值