from django.core.urlresolvers import reverse, NoReverseMatch
from django.newforms import HiddenInput, TextInput
from django.utils import simplejson
from django.utils.safestring import mark_safe
class AutocompleteWidget(TextInput):
"""
Autocomplete widget to use with jquery-autocomplete plugin.
Widget can use for static and dynamic (AJAX-liked) data. Also
you can relate some fields and it's values'll posted to autocomplete
view.
Widget support all jquery-autocomplete options that dumped to JavaScript
via django.utils.simplejson.
**Note** You must init one of ``choices`` or ``choices_url`` attribute.
Else widget raises TypeError when rendering.
"""
def __init__(self, attrs=None, choices=None, choices_url=None, options=None, related_fields=None):
"""
Optional arguments:
-------------------
* ``choices`` - Static autocomplete choices (similar to choices
used in Select widget).
* ``choices_url`` - Path to autocomplete view or autocomplete
url name.
* ``options`` - jQuery autocomplete plugin options. Auto dumped
to JavaScript via SimpleJSON
* ``related_fields`` - Fields that relates to current (value
of this field will sended to autocomplete view via POST)
"""
self.attrs = attrs or {}
self.choice, self.choices, self.choices_url = None, choices, choices_url
self.options = options or {}
if related_fields:
extra = {}
if isinstance(related_fields, str):
related_fields = list(related_fields)
for field in related_fields:
extra[field] = "%s_value" % field
self.extra = extra
else:
self.extra = {}
def render(self, name, value=None, attrs=None):
if not self.choices and not self.choices_url:
raise TypeError('One of "choices" or "choices_url" keyword argument must be supplied obligatory.')
if self.choices and self.choices_url:
raise TypeError('Only one of "choices" or "choices_url" keyword argument can be supplied.')
choices = ''
if self.choices:
self.set_current_choice(value)
choices = simplejson.dumps([unicode(v) for k, v in self.choices], ensure_ascii=False)
html_code = HiddenInput().render(name, value=value)
name += '_autocomplete'
else:
html_code = ''
if self.choices_url:
try:
choices = simplejson.dumps(reverse(str(self.choices_url)))
except NoReverseMatch:
choices = simplejson.dumps(self.choices_url)
if self.options or self.extra:
if 'extraParams' in self.options:
self.options['extraParams'].update(self.extra)
else:
self.options['extraParams'] = self.extra
options = ', ' + simplejson.dumps(self.options, indent=4, sort_keys=True)
extra = []
for k, v in self.extra.items():
options = options.replace(simplejson.dumps(v), v)
extra.append(u"function %s() { return $('#id_%s').val(); }\n" % (v, k))
extra = u''.join(extra)
else:
extra, options = '', ''
final_attrs = self.build_attrs(attrs)
html_code += super(AutocompleteWidget, self).render(name, self.choice or value, attrs)
html_code += u"""
<script type="text/javascript"><!--
%s$('#%s').autocomplete(%s%s);
--></script>
""" % (extra, final_attrs['id'], choices, options)
return mark_safe(html_code)
def set_current_choice(self, data):
if not self.choices:
raise ValueError('"choices" attribute was not defined yet.')
for k, v in self.choices:
if k == data:
self.choice = v
break
def value_from_datadict(self, data, files, name):
if not self.choices:
return super(AutocompleteWidget, self).value_from_datadict(data, files, name)
autocomplete_name = name + '_autocomplete'
if not autocomplete_name in data:
self.set_current_choice(data[name])
return data[name]
for k, v in self.choices:
if v == data[autocomplete_name]:
self.set_current_choice(k)
return k
<strong>forms.py</strong>
from django import newforms as forms
from django.utils.translation import ugettext as _
from myproject.widgets import AutocompleteWidget
SPORTS_CHOICES = (
('basketball', _('Basketball')),
('football', _('Football')),
('hockey', _('Hockey')),
)
class SampleForm(forms.Form):
name = forms.CharField(label=_('Name'))
country = forms.CharField(label=_('Country'),
widget=AutocompleteWidget(choices_url='autocomplete_countries', related_fields=('city',)))
city = forms.CharField(label=_('City),
widget=AutocompleteWidget(choices_url='autocomplete_cities', related_fields=('country',)))
sports = forms.ChoiceField(label=_('Sports'), choices=SPORTS_CHOICES,
widget=AutocompleteWidget(options={'minChars': 0, 'autoFill': True, 'mustMatch': True}))
<strong>urls.py</strong>
from django.conf.urls.defaults import *
urlpatterns = patterns('',
url('/path/to/cities/autocomplete/', 'views.autocomplete_cities', name='autocomplete_cities'),
url('/path/to/countries/autocomplete/', 'views.autocomplete_countries', name='autocomplete_countries'),
)
<strong>views.py</strong>
from myproject.models import City
def autocomplete_cities(request):
def results_to_string(results):
if results:
for r in results:
yield '%s|%s\n' % (r.name, r.pk)
city = request.REQUEST.get('q', None)
country = request.REQUEST.get('country', None)
if city:
cities = City.objects.filter(city__istartswith=city)
else:
cities = City.objects.all()
if country:
cities = cities.filter(country__name=country)
cities = cities[:int(request.REQUEST.get('limit', 15))]
return results_to_string(cities, mimetype='text/plain')
http://djangonaut.blogspot.com/2008/05/jquery-autocompletewidget-django.html
分享到:
相关推荐
jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint,jquery.jqprint-0.3.js 下载,内包含使用示例,下载解压可直接在浏览器打开使用。 ...
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
使用jQueryEasyUI提升客户体验,从零基础到高级,资源长期有效
在本文中,我们将深入探讨如何使用jQuery-webcam插件实现在Web页面上调用摄像头进行拍照的功能。jQuery-webcam是一款非常实用的JavaScript库,它允许开发者轻松地将摄像头功能集成到网页中,为用户提供实时预览、...
2. **创建HTML界面**:使用jQuery Mobile创建一个用户友好的界面,包括搜索、添加、编辑和删除联系人的功能。利用jQuery Mobile的`data-*`属性来定义可交互的元素。 3. **利用HTML5存储**:根据需求选择Web SQL ...
本教程将深入讲解如何使用jQuery来实现一个简单的人物跑动效果,这对于初学者来说是一个很好的起点。 首先,理解jQuery的核心概念至关重要。jQuery通过选择器选取DOM元素,然后对这些元素进行操作。例如,`$("#...
使用jQuery为表格添加合计行,方法依赖jQuery,方法中使用到的JQ是jQuery中的$方法的别名
首先,我们来看看标题中的"jquery-3.4.1_jquery_3.4.1.js",这表明我们关注的是jQuery库的3.4.1版本,这是一个稳定且广泛使用的版本。"jquery-3.4.1.js"是jQuery的核心库文件,包含了所有jQuery的功能,开发者可以...
使用 jQuery Ajax 异步登录,并验证用户输入信息(maven),图文教程地址:https://blog.csdn.net/qq_40147863/article/details/85999375
编写基于Jquery的表单验证插件 ...1、初步运用了Jquery框架进行编程,基本掌握Jquery框架的使用。 2、熟练使用Jquery-validate表单验证插件,并熟知实现原理。 3、基本实现了一个基于Jquery的表单验证的调查问卷。
example-jquery-shim, 通过shim配置使用jQuery和jQuery插件的示例项目 在 shim 配置中使用jQuery和 require.js的示例。本示例显示一种用 require.js. jQuery本身寄存器加载jQuery和jQuery插件的方法,可以以轻松加载...
JavaScript+jQuery 网页特效设计 jQuery(3.4.1)基础 ...很多大公司都在使用 jQuery, 例如: Google Microsoft IBM Netflix 3、jQuery安装 “jquery-1.10.2.min.js”></script>// 需要注意下载的版本 3.1
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
第一部分介绍jQuery核心库,从如何使用jQuery开始,演示一些基础API的使用、如何优化选取集以及如何与服务器通信等内容。第二部分介绍 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
在线实时的斗兽棋游戏,时间赶,粗暴的使用jQuery + websoket 实现实时H5对战游戏 + java.zip在线实时的斗兽棋游戏,时间赶,粗暴的使用jQuery + websoket 实现实时H5对战游戏 + java.zip在线实时的斗兽棋游戏,时间...
从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery 中的Ajax 从零开始学习jQuery (七) jQuery 动画-让页面动起来! 从零开始学习...
- 生产环境中,推荐使用`jquery-1.12.4.min.js`以提高页面加载速度。 - 遇到具体问题时,查阅CHM文件中的API文档,了解具体函数或方法的用法和参数。 - 结合实际项目练习,将jQuery的知识应用到网页交互、动态效果和...
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
使用Jquery.uploadify上传文件。 jquery有很多插件,其中也有不少上传文件的插件,像ajaxfileupload.js、uploadify.js,不过网上的例子几乎全是php的,很郁闷,研究了半天,终于把uploadify用jsp版本弄出来了