Chosen.js in the Django admin

Update Nov 23, 2013: I've written a little app ( django-chosenadmin ) that'll automatically add this to every app.

Quite some time ago, I ran across the chosen.js plugin for jQuery and Prototype (I'm using the jQuery flavor). My first thought upon seeing this was, " This would rock in Django's admin app. " Yet for some reason, I didn't make that happen.

Until recently.

I maintain a project where about 10 people use the admin app extensively. They manage several apps that have foreign keys to django's User model. This works well enough, but there are a few thousand user accounts. That makes the default <select> elements fairly unwieldy, and the <select multiple> widgets are just horrendous!

Fortunately, the chosen.js plugin is fairly straighforward to install for the admin. You'll first need to grab a copy of chosen.js and (if you want to use them) the default CSS and sprite files. I just grabbed the most current version from github .

chosen.js : https://github.com/harvesthq/chosen/blob/master/chosen/chosen.jquery.min.js chosen.css : https://github.com/harvesthq/chosen/blob/master/chosen/chosen.css chosen-sprite.png : https://github.com/harvesthq/chosen/blob/master/chosen/chosen-sprite.png

My static files are organized as follows. Note that I put chosen's CSS & sprite files in a subdirectory named chosen :

project_directory/
static/
css/
chosen/
chosen.css
chosen-sprite.png
js/
chosen.js

Now, you can override the admin app's change_form.html template (be sure to get a copy for your version of django. You can do this by putting your own copy of the template in your project's templates directory (see your TEMPLATE_DIRS setting). For me, that looks like this:

project_directory/
templates/
admin/
change_form.html

In that template, there's an extrahead block. At the bottom of that block, you need to include a link to the plugin and the css file. Since this is a jQuery plugin, you'll also need to include a link to jQuery. ( Even though django's admin comes bundled with jQuery, it's namespaced, so to use a 3rd-party plugin, you need your own copy of the library. See this note )

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript"></script>
<script
src="{{ STATIC_URL }}js/chosen.jquery.min.js"
type="text/javascript"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}css/chosen/chosen.css"/>

Now, you can apply the chosen plugin to all <select> elements!

<script type="text/javascript">
$(document).ready(function() {
$('select').chosen();
});
</script>

However, this has one unfortunate side effect. Django's admin app contains a custom multi-select widget, that normally looks like this:

The chosen plugin dutifully mangles the custom widget, which is probably not what you want:

The admin app's custom widget includes javascript that gets loaded after the page loads. Luckily, it includes a filtered class on the elements to which it is applied. So, we need the chosen plugin to load after the admin app's javascript has run.

The only what I got that to work was to use setTimeout . This is definitely a hack, and I'd love to see a more elegant solution... but it works. So, the previous code to initialize the chosen plugin would be replaced with the following:

<script type="text/javascript">
setTimeout(function() {
$('select').not('.filtered').chosen();
}, 1000);
</script>

Now the plugin gets loaded about 1 second after the page is finished loading, so you get both the admin app's custom multi-select widget and the chosen.js plugin. There's a visible delay before the plugin gets loaded, but you could tweak the second argument to minimize this somewhat. For my needs, the benefits of the more usable interface for <select> elements outweigh the cost of loading the plugin.