AjaxForeignKey Field

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

Overview

Using ​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. Create three files in that directory:

• __init__.py -- duh
• fields.py -- contains the actual model field. (download)
• forms.py -- contains the form field. (download)

3. Create a base_site.html file in your base_templates/admin directory.

4. Modify your models to use it correctly.

base_templates/admin/base_site.html

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

{% block extrahead %}{{ block.super }}
<script type="text/javascript" src="/media/scripts/yui/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="/media/scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/media/scripts/yui/dom/dom-min.js"></script>
<script type="text/javascript" src="/media/scripts/yui/connection/connection-min.js"></script>
<script type="text/javascript" src="/media/scripts/yui/animation/animation-min.js"></script>
<script type="text/javascript" src="/media/scripts/yui/autocomplete/autocomplete-min.js"></script>
<script type="text/javascript" src="/media/scripts/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 %}

Notice how YUI is in "/media/scripts/yui" and I downloaded ​json.js