`
blithewu
  • 浏览: 12022 次
  • 性别: Icon_minigender_1
  • 来自: 浙江
社区版块
存档分类
最新评论

使用jquery的AutocompleteWidget

阅读更多
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,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源码jQuery源码jQuery源码jQuery源码...

    使用jQueryEasyUI提升客户体验

    使用jQueryEasyUI提升客户体验,从零基础到高级,资源长期有效

    使用jQuery-webcam摄像头拍照demo

    在本文中,我们将深入探讨如何使用jQuery-webcam插件实现在Web页面上调用摄像头进行拍照的功能。jQuery-webcam是一款非常实用的JavaScript库,它允许开发者轻松地将摄像头功能集成到网页中,为用户提供实时预览、...

    使用jquery-mobile+html5实现android本地通讯录

    2. **创建HTML界面**:使用jQuery Mobile创建一个用户友好的界面,包括搜索、添加、编辑和删除联系人的功能。利用jQuery Mobile的`data-*`属性来定义可交互的元素。 3. **利用HTML5存储**:根据需求选择Web SQL ...

    jquery实现简单的人物跑动

    本教程将深入讲解如何使用jQuery来实现一个简单的人物跑动效果,这对于初学者来说是一个很好的起点。 首先,理解jQuery的核心概念至关重要。jQuery通过选择器选取DOM元素,然后对这些元素进行操作。例如,`$("#...

    使用jQuery为表格添加合计行

    使用jQuery为表格添加合计行,方法依赖jQuery,方法中使用到的JQ是jQuery中的$方法的别名

    jquery-3.4.1_jquery_3.4.1.js_jquery-3.4.1_sangat1_jquery3.4.1_jq

    首先,我们来看看标题中的"jquery-3.4.1_jquery_3.4.1.js",这表明我们关注的是jQuery库的3.4.1版本,这是一个稳定且广泛使用的版本。"jquery-3.4.1.js"是jQuery的核心库文件,包含了所有jQuery的功能,开发者可以...

    使用 jQuery Ajax 异步登录,并验证用户输入信息(maven)

    使用 jQuery Ajax 异步登录,并验证用户输入信息(maven),图文教程地址:https://blog.csdn.net/qq_40147863/article/details/85999375

    Java Web Jquery表单验证

    编写基于Jquery的表单验证插件 ...1、初步运用了Jquery框架进行编程,基本掌握Jquery框架的使用。 2、熟练使用Jquery-validate表单验证插件,并熟知实现原理。 3、基本实现了一个基于Jquery的表单验证的调查问卷。

    example-jquery-shim, 通过shim配置使用jQuery和jQuery插件的示例项目.zip

    example-jquery-shim, 通过shim配置使用jQuery和jQuery插件的示例项目 在 shim 配置中使用jQuery和 require.js的示例。本示例显示一种用 require.js. jQuery本身寄存器加载jQuery和jQuery插件的方法,可以以轻松加载...

    jQuery基础.pptx

    JavaScript+jQuery 网页特效设计 jQuery(3.4.1)基础 ...很多大公司都在使用 jQuery, 例如: Google Microsoft IBM Netflix 3、jQuery安装 “jquery-1.10.2.min.js”&gt;&lt;/script&gt;// 需要注意下载的版本 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-3.7.0.min.js(jQuery下载)...

    jQuery、jQueryUI及jQueryMobile技巧与示例

    第一部分介绍jQuery核心库,从如何使用jQuery开始,演示一些基础API的使用、如何优化选取集以及如何与服务器通信等内容。第二部分介绍 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    在线实时的斗兽棋游戏,时间赶,粗暴的使用jQuery + websoket 实现实时H5对战游戏 + java.zip

    在线实时的斗兽棋游戏,时间赶,粗暴的使用jQuery + websoket 实现实时H5对战游戏 + java.zip在线实时的斗兽棋游戏,时间赶,粗暴的使用jQuery + websoket 实现实时H5对战游戏 + java.zip在线实时的斗兽棋游戏,时间...

    jQuery使用手册 jquery入门教程

    从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery 中的Ajax 从零开始学习jQuery (七) jQuery 动画-让页面动起来! 从零开始学习...

    jQuery1.12.4+jQuery中文手册.rar

    - 生产环境中,推荐使用`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.treeview插件库)jquery插件库(jquery....

    使用Jquery.uploadify上传文件(JAVA版)

    使用Jquery.uploadify上传文件。 jquery有很多插件,其中也有不少上传文件的插件,像ajaxfileupload.js、uploadify.js,不过网上的例子几乎全是php的,很郁闷,研究了半天,终于把uploadify用jsp版本弄出来了

Global site tag (gtag.js) - Google Analytics