2

I have a div that is popped up as a list of items as you type into a text box.

On blur of the textbox I hide the list of items.

However, I have click events on the items that no longer trigger because the focusout event fires first.

What I want is to hide the list on blur unless an item in the list has been clicked.

Does anyone know of a way?

It should work the same as the Tags section of this site when asking a question.

Gert Grenander
  • 16,866
  • 6
  • 40
  • 43
griegs
  • 22,624
  • 33
  • 128
  • 205
  • Why not look at how Stack Overflow implements it? They use jQuery, too. – Matt Ball Nov 16 '10 at 02:56
  • @Matt They're actually using a plugin. An outdated one, to be precise - http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ – Yi Jiang Nov 16 '10 at 02:59
  • Is there a non-plug in approach? – griegs Nov 16 '10 at 03:17
  • @griegs Actually, unless you're looking for a feature not available in any of the other plugins then you should try to use one. Don't reinvent the wheel, ya know? :) – Yi Jiang Nov 16 '10 at 03:39
  • @Yi Jiang, I do yeah but it's such a small corner of the app that if i can get away with a simple jquery-ish solution then i'd prefer it. – griegs Nov 16 '10 at 03:40

2 Answers2

5

With jQuery 1.6 or higher you can use the :focus selector to see if your div has any children that have focus before hiding the div.

$("#textboxID").blur(function () {
    if ($("#divID").has(":focus").length == 0) {  //if you click on anything other than the results
        $("#divID").hide();  //hide the results
    }
});

Update: Turns out that only worked in IE. Here is a better solution, though a little complex for the task. http://jsfiddle.net/cB2CN/

var resultsSelected = false;
$("#ResultsDIV").hover(
    function () { resultsSelected = true; },
    function () { resultsSelected = false; }
);

$("#TextBox").blur(function () {
    if (!resultsSelected) {  //if you click on anything other than the results
        $("#ResultsDIV").hide();  //hide the results
    }
});
Paul
  • 1,907
  • 2
  • 21
  • 29
  • Great, thanks. A little stale this question but thank you anyway. :) +1 and I think I'll also accept – griegs Jan 24 '12 at 02:25
  • this is not working for me (length is always 0), but it was a good idea :/ – jave.web Aug 28 '13 at 13:26
  • @jave.web try IE, I bet you'll see a different result. I found that issue too in FF/Chrome/Safari and posted a new question about it. http://stackoverflow.com/questions/10391823/jquery-hasfocus-in-ff-chrome-safari – Paul Aug 28 '13 at 18:26
1

I'm working on a custom search engine for a web app that I'm building. This is the solution I came up with for a similar issue. It works in all browsers to the best of my knowledge.

$( document ).ready(function() {
    $( '#inputBox' ).focusout( function() {
        $( '#resultsDiv' ).hover(
            function() {         
                return;
            },
            function() {
                $( '#resultsDiv' ).fadeOut( 'slow' );
                $( '#resultsDiv' ).html( '' );
            });
    });
});

I changed the blur method to focusout (has to be all lowercase by the way...focusOut will not work). The .hover event has two conditions; true or false. The first function fires if it's true (if the user is hovering over the results) and the second function fires if the user is NOT hovering over the results.

The only "problem" I've had is that it fades out when the user goes outside of the #resultsDiv. I would add a little bit of clear padding around it to make sure the user doesn't go outside of it on accident.

ElmosHomie492
  • 94
  • 1
  • 3