Search code examples
jqueryperformancedelayautosuggest

Autosuggest jquery ajax fades out prematurely


Hello I have a jquery autosuggest that is fading out too soon:

 http://www.mirochgroup.com/MirocheGroup/

I have instructed it to start searching after the user types minimim 3 words,

so many times the results displayed fadeout as I try to pass the mouse from the input text to the results,

they fade out prematurely

    $(function(){
    $(".search").keyup(function() 
    { 
    var searchid = $(this).val();
    var dataString = 'search='+ searchid;
    if(searchid!='')
    {
        $.ajax({
        type: "POST",
        url: "searchx",
        data: dataString,
        cache: false,
        success: function(html)
        {
        $("#result").html(html).show('2000');
        }
        });
    }return false;    
    });

    jQuery("#result").live("click",function(e){ 
        var $clicked = $(e.target);
        var $name = $clicked.find('.name').html();
        var decoded = $("<div/>").html($name).text();
        $('#searchid').val(decoded);
    });
    jQuery(document).live("click", function(e) 
    { 
        var $clicked = $(e.target);
        if (! $clicked.hasClass("search"))
        {
            setTimeout(function()
            {
                jQuery("#result").delay('1500').fadeOut('2800');
            },7000);
        }
        });
        $('#searchid').click(function(){
            //jQuery("#result").fadeIn("1000");
             jQuery("#result").delay('500').fadeIn('1300');
        });

    });

This is the form:

    <form>
            <input type="text"  id="searchid" name="sear"  autocomplete="off"/>
            <div id="result" style = 'z-index:5000;position:relative;'></div>
    </form> 

What am I doing wrong,

Many Thanks


Solution

  • This was tricky. The way fwslider.js was coded, it triggers a click on "#fwslider .slideNext". This click event is then handled by your jQuery(document).live(... handler. In your document click handler I would check the event target and not run if the target was the slideshow next button.

    jQuery(document).live("click", function(e) 
        { 
            var $clicked = $(e.target);
            if (!$clicked.hasClass("search") && !$clicked.hasClass(".slideNext")){...
    

    I found this by looking at the call stack in Firebug.