= Autocompletion for !ForeignKeys in Admin (YUI) =

== The Problem ==
In the Admin, I would like to have an autocompletion field for !ForeignKey references. I know {{{raw_id_admin}}} works, but AJAX is just so much cooler.

== The Solution ==

Using [http://developer.yahoo.com/yui/ YUI], create a new field similar to {{{models.ForeignKey}}} that renders differently in the admin.

== Installation ==

Here's how it's setup:

1. Create a new folder in your project called {{{ajaxfkey }}}

2. Put four files in that directory:

  * {{{__init__.py}}} -- duh
  * {{{fields.py}}} -- contains the actual model field. (download)
  * {{{forms.py}}}  -- contains the form field. (download)
  * {{{views.py}}}  -- contains the AJAX view. (download)

3. [#Creatingbase_templatesadminbase_site.html Create a base_site.html file in your base_templates/admin directory.]

4. [#Modifyurls.py Modify your urls conf to contain the ajax view.]

5. [#Usingitinyourmodels Modify your models to use it correctly.]

=== Creating {{{ base_templates/admin/base_site.html }}} ===

Put the contents below in a place locatable by {{{'admin/base_site.html'}}} in your setup.
(It certainly does not need to be inside Django's source.)

{{{
{% extends "admin/base.html" %}
{% load i18n %}

{% block extrahead %}{{ block.super }}
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="http://www.json.org/json.js"></script>
{% endblock %}

{% block title %}{{ title|escape }} | {% trans 'Django site admin' %}{% endblock %}

{% block branding %}
<h1 id="site-name">{% trans 'Django administration' %}</h1>
{% endblock %}

{% block nav-global %}{% endblock %}
}}}


=== Modify {{{urls.py}}} ===

Put the following in your urls configuration:
{{{
#!python
(r'^admin/ajax_autocomplete/?', 'project.ajaxfkey.views.ajax_autocomplete'),
}}}

Change {{{project.ajaxfkey}}} to the path to the views file you created.

=== Using it in your models ===

To use, you need to define a {{{ajax_autocomplete(data)}}} (either in {{{Model}}} or {{{Model.objects}}}) and an {{{ajax_str}}}.

Below is an example usage in some models:

{{{
#!python
from django.db import models
from ajaxfkey.fields import AjaxForeignKey

# notice the manager, we can create a staticmethod in Poll if we wanted.
class PollManager(models.Manager):
    def ajax_autocomplete(self, data):
        return self.filter(question__istartswith = data).order_by('question')

class Poll(models.Model):
    question = models.CharField(maxlength=200)
    pub_date = models.DateTimeField('date published')

    # set the manager
    objects = PollManager()

    # this is how it displays in the autocompletion...should be related to 
    # how the person filters above
    def ajax_str(self):
        return self.question

class Choice(models.Model):
    # notice it's the same syntax as models.ForeignKey
    poll = AjaxForeignKey(Poll)
    choice = models.CharField(maxlength=200)
    votes = models.IntegerField()
}}}

=== Screenshot ===

Congratulations, you should be done! The obligatory screenshot is:

http://esp.mit.edu/media/uploaded/07_05/ajaxfkey.jpg

== Problems ==

If you have any problems, feel free to email me at http://www.axiak.net/contact/