Question

I have an autocomplete search form, more or less like the one used on facebook, where I start typing and a list of names shows up.
I made links of each of these names so you can open their profile page.
I also have a function on the search form’s input field ‘onblur’, where I hide the autocomplete div with all the names. So that when I click outside it, it doesn’t stay visible. The only problem now is that when I click one of the names, the pages doesn’t redirect to the profile page of the anchor tag, even though the cursor does change on hover.

Anybody any idea?

Answer 1

This is because your hide event removes the list before the element can actually be clicked. There are couple of solutions.

First you could use a setTimeout to hide

setTimeout( function() { /* hide list */ }, 500);

In answer to your comment, no, you can’t reorder events. So you will have to find a work around. There are a number of methods, but since you are using jQuery I would do it this way.

//you probably have something like this currently
$('element').blur( function() { $('results').hide(); });    

//change it to something like this
$('element').blur( function() { $('results').fadeOut(300); });