jquery: simplest little bit of help needed

unwashed potato! · 17 Mar 2009 at 13:42

i got a very simple problem which can't seem to find the solution to.

i have an input field that does an ajax search and then slides in the results usin jquery. what i want is if the user clicks on anything but the input field or the results box then slide the box back away.

i thought it would be nice and simple but it appears not, below is the latest thing i have tried.

Code:

$(document.body).click(function(event) {

     var boundary1 = $('#searchInput');
    var boundary2 = $('#searchResults');
    var clickedEl = $(this).attr('id');

    if(clickedEl != boundary1 && clickedEl != boundary2) {
         //do the slide
    }
});

but it doesn't work

if i alert each var then i get undefined, or if i remove the attr('id') i get object Object.

marc2003 · 17 Mar 2009 at 14:11

use the blur event on your results box....

http://docs.jquery.com/Events/blur

unwashed potato! · 17 Mar 2009 at 23:15

looks like that is what i am after but unfortunately can't seem to get it to work.

he is what i have, any reason it wouldn't work?

Code:

$('#searchInput').blur(function () {
             $('#searchResults').slideUp(300);
    });

marc2003 · 18 Mar 2009 at 15:39

surely you should attach it to the searchResults?

unwashed potato! · 19 Mar 2009 at 01:50

marc2003 said:
surely you should attach it to the searchResults?

if you mean change $('#searchInput') to $('searchResults') then nope, unless i'm being massivelt mistaken what blur does.

the focus still should be on the input field as the user could still want to type as the results appear, so the blur event needs to be triggered on the searchInput loosing focus.

marc2003 · 19 Mar 2009 at 13:41

ah right ok then....

are you using firebug? are errors with that? perhaps replace the slide with an alert to see if that works as expected?

Pho · 19 Mar 2009 at 15:49

Can you post up the HTML that goes with it?