Snippet List
Custom form widget for rendering an autocomplete (using jQuery UI's autocomplete widget) text input in a template.
This arose from the need to have all fields asking for a state to use autocomplete, so I decided to make this.
- forms
- jquery
- autocomplete
- widget
- jqueryui
For disabling autocomplete and security purpose, this snippet defines a CharField with a randomness name for each request of the form.
This is useful for turning off autocomplete for credit card input in all browsers, without breaking the xhtml validation.
* [https://wiki.mozilla.org/The_autocomplete_attribute_and_web_documents_using_XHTML#Security](https://wiki.mozilla.org/The_autocomplete_attribute_and_web_documents_using_XHTML#Security)
* [http://en.wikipedia.org/wiki/Cryptographic_nonce](http://en.wikipedia.org/wiki/Cryptographic_nonce)
- fields
- forms
- validation
- security
- form
- field
- autocomplete
- formfield
- nonce
This is a general JQuery Autocomplete Form Field for selecting any model instance in your forms.
1 Download jquery.1.2.6 and the jquery autocomplete plugin http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/, place theme somewhere in your media directory (in this case {{ MEDIA__URL}}/js/
2 copy fields.py to anywhere in your python-path (in this case utils.fields)
3 create a view for the ajax request that receives a query and returns a key|value list, and register it in your urls.py
4 Just Use the fields in any form like in forms.py
- selection
- model
- jquery
- autocomplete
This snippet allows you to use YUI's autocomplete widget in a easy way.
1. Download YUI (http://developer.yahoo.com/yui/) library and put it into MEDIA folder (in my case I put YUI/build/ directory as base/yui/ in my MEDIA folder)
2. Create lookup view for your autocomplete field.
See 'test_ajax_ac' function to see how this lookup view may be built. You have to define JsonResponse somewhere in your files. JsonResponse is taken from: http://www.djangosnippets.org/snippets/154/
3. Define url for newly created view in urls.py (in usual way)
4. Include necessary .js and .css files in your page (see example in test_ajax.html)
5. Assign widget to a field - see form's __init__ at UserForm in the example.
Additional (optional) parameters are: format_result_fname (name of javascript function for formatting results - see YUI docs for examples)), item_select_handler_fname (name of javascript function for handling item select event (see YUI docs)).
When using YUI take care about proper skin - you'll possibly need to define wrapper like:
`<div class="yui-skin-sam">....</div>`
around your html code.
- javascript
- yui
- autocomplete
- widget
This is an improvement of snippet 253 in that it supports database queries.
Implementing autocompletion for foreign keys takes a few steps:
1) Put the snippet above into <app>/widgets/autocomplete.py.
2) Create a view of your foreign key model (here: Donator) in <app>/donator/views.py:
from models import Donator
from widgets.autocomplete import autocomplete_response
def autocomplete(request):
return autocomplete_response(
request.REQUEST['text'], Donator, (
'line_1', 'line_2', 'line_3', 'line_4',
'line_5', 'line_6', 'line_7', 'line_8',
'^zip_code', 'location'
)
)
This view returns the autocompletion result by searching the fields in the tuple. Each word from the form field must appear at least in one database field.
3) Create a URLconf that points to this new view.
4) In the form where you need the autocompletion, define the widget of the foreign key field as an instance of AutoCompleteField:
from widget.autocomplete import AutoCompleteField
field.widget = AutoCompleteField(
url='/donator/autocomplete/'),
options={'minChars': 3}
)
The url parameter is the URL connected to the view in step 3), the options dict is passed on to the Ajax.Autocompleter JavaScript object.
Links:
* [Snippet 253](http://www.djangosnippets.org/snippets/253/)
* [Django and scriptaculous integration](http://wiki.script.aculo.us/scriptaculous/show/IntegrationWithDjango)
* [Ajax.Autocompleter](http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter)
- ajax
- selection
- database
- autocomplete
- query
- foreign-key
- prototype
- scriptaculous
- protoculous
7 snippets posted so far.