The problem

I recently worked on a project with a backend using the Django admin library. It is a wonderful tool, but the filter interface is not equipped to deal with the thousands of options that were being populated in this particular form entry (a necessary parameter of the project.)

The Django filter interface would take 30 seconds or more to load the multi-select’s data on each form load, even on speedy computers. Moreover, the search filter breaks up queries at spaces, then performs a substring search for each token for every option in the select. Suffice it to say that this locked up more than a few browsers in our testing.

The solution

My first thought was to create my own search using a ternary tree or trie to index the data, but building these structures turned out to be extremely slow implemented in Javascript, taking even more time than the Django filter to initialize.

I ended up trying what seemed like a foolish idea. Create one large string to search by joining all of the options’ labels together (and delimiting with pipes). I assumed this would take a huge amount of memory, but in fact it took less than Javascript trees and was much faster than operating directly on DOM nodes. By delimiting the strings, a bounded regular expression could be used to perform reasonably fast searches of the data. There would be the need to identify the options to which the strings originated, for which I created a simple hash mapping option label to value.

This solution has two main problems – it assumes that all entries in the select box have both a unique label and a unique value, and no label can have a pipe in it. However, assuming that these conditions are met, this solution seems to work pretty speedily, and without overtaxing the browser.

The code

This code is implemented as a jQuery plugin. It hides the select and changes made to the widget automatically update the select. A search box and two lists are inserted into the document; the user enters a partial match in the search box and hits return. The first list is populated with the search results. Double-clicking on a result copies it into the second list.

Items that are already selected are automatically put into the second list. Regular expressions are permitted, and must be surrounded by forward slashes.

This module has been lightly tested in Firefox 2 and 3, Safari (latest), Opera (latest), and IE 7. A few concessions in favor of efficiency have been made at the expense of clarity (mainly for IE, which seems to have the slowest Javascript engine), primarily in the SelectMap constructor. jQuery’s each method and string concatenation proved to be too much for IE, so they were replaced with a for loop over the select node’s legacy options array. Iterative string building was replaced with Array.join, which is faster (but more expensive in memory) in IE.

To use it:

$(function() {
    var select = new BigSelect('target_id');
    // or...
    $('#target_id').bigSelect();
});

The code is available here. You can see a live example here.

Submit article

Python’s partial() is contained in the functools module (included since Python 2.5, I believe). The first argument passed must be the function to be curried, and the rest are positional or keyword arguments that will be used to curry the passed function.

A common case where partials are useful is in defining a compare function for a list. It often happens that the list must be sorted according to rules defined at runtime. A partial application can simplify the process, especially if there is a complex sort algorithm. Assume a list of Items, items. The list will be sorted according to get_sort_attribute(), which returns the name of the attribute of Item which will be used to perform the sort, and get_sort_direction, which returns either “desc” or “asc.” Rather than using a long series of if/else statements and calling the sort() method in various ways, partial() can be used to progressively modify the sort.

To sort a list this way, we might have something like:

(def compare(a, b):
    attr = get_sort_attribute()
    dir = get_sort_direction()
    value_a = getattr(a, attr)
    value_b = getattr(b, attr)
    if dir == 'desc':
        return cmp(value_b, value_a)
    else:
        return cmp(value_a, value_b)
items.sort(compare)

This can get pretty long-winded, especially if our function, compare, performs complex operations before performing the comparison. Here is the same thing using partial applications to compose our function instead:

from functools import partial
 
# Wrap getattr in a lambda so that can accept keyword arguments
attribute_getter = partial(lambda object, name:
    getattr(object, name), name=get_sort_attribute())
sort_fn = partial(items.sort, key=attribute_getter)
if get_sort_direction() == 'desc':
    sort_fn = partial(sort_fn, reversed=True)
sort_fn()

This is certainly more concise. I found a nice little currying function for Javascript here (edit: it was pointed out in a reader’s comment (here and at dzone) that this version of curry does not work on previously curried functions; below it is a modified version which will function as expected):

/*
function curry(fn, scope) {
    var scope = scope || window;
    var args = [];
    for (var i=2, len = arguments.length; i < len; ++i) {
        args.push(arguments[i]);
    };
    return function() {
        /* one big problem here is that the following statement
        is not returning the applied function. */
        fn.apply(scope, args);
    };
}
*/
 
function curry(fn, scope) {
    var scope = scope || window;
    var args = [];
    for (var i = 2; i < arguments.length; i++) {
        args.push(arguments[i]);
    }
    return function() {
        // this takes care of the arguments problem
        var fn_args = [];
        for (var i = 0; i < args.length; i++) {
            fn_args.push(args[i]);
        }
        for (var i = 0; i < arguments.length; i++) {
            fn_args.push(arguments[i]);
        }
        // this takes care of the null return problem
        return fn.apply(scope, fn_args);
    };
}

I often use this in my Django web projects. I will include a basic error function which inserts an error message into an element with a particular id on the base template. Note that I use jQuery in the following examples.

function err(target, msg) {
    $('#' + target).html(msg);
}

In templates that extend that template, I can then use currying to modify that for a particular location defined in this template:

var err = curry(err, window, 'err_div_in_this_template');

I can further use this to create custom error callbacks for ajax functions:

var err404 = curry(err, window, "The server could not be contacted.");

Now, err404 is the equivalent of:

function err404() {
    $('#' + 'err_div_in_this_template').html("The server could not be contacted.");
}

Obviously, this is a pretty trivial example, but it does a good job of showing a real-world use for currying.

Submit article