jQuery AJAX username availability lookup

One of the key design goals of our new Simple Web Management platform is ease of use. We want to deliver a joyous user experience.

If you read my post on password generation using twitter you will know I’m currently working on the process of adding users to the system. A neat little user experience trick I like, that you’ve no doubt seen elsewhere, is to check the availability of a username as the user is typing.

Looking up the username on the server and returning a response via AJAX is pretty simple (especially with JQuery), but every time the function is called a lookup on the user table is processed. Therefore, we don’t really want to do a lookup every time the user presses a key.

The first solution to the problem of this could be to add a ‘check availability’ link next to the username field, but this is a bit… erm… scrappy. The best option would be to wait until the user has stopped typing for a while. Well, thanks to a great little jQuery plugin called TypeWatch this is a doddle.

Here is my code. You’ll need jQuery and the TypeWatch plugin to make this work. Assumptions – my username field is ID’d Username, the AJAX query returns the text of the availability and puts it in to a span ID’d usernameAvailability.

//On page load.
$(document).ready(function() {

//Typewatch options
var typeWatchOptions = {
callback:function(){ checkUsernameAvailability(); },
wait:750
}

//Watch for when typing is finished in the username field.
$(“#Username”).typeWatch(typeWatchOptions);

//When a user is typing in the username field, we don’t want the availability status to show.
$(“#Username”).keypress(function() {
$(‘#usernameAvailability’).text(”);
});

});

//does the AJAX username lookup
function checkUsernameAvailability() {

$(‘#usernameAvailability’).text(‘Checking availability…’);

//Do an AJAX request to see if the username is available.
$.get(‘/action/people/is-username-available’, { username: $(‘#Username’).val() }, function(data) {
$(‘#usernameAvailability’).text(data);
});

}

Tagged as: jquery programming tutorial