Autosuggest jquery ajax fades out prematurely

Question

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

Tried all such combinations: jQuery(document).live("click", function(e) { var $clicked = $(e.target); if (! $clicked.hasClass("search")) { setTimeout(function() { jQuery("#result").fadeOut('2800'); },7000); } }); $('#searchid').click(function(){ //jQuery("#result").fadeIn("1000"); jQuery("#result").delay('500').fadeIn('1300'); }); }); — Peter Manoukian, Sep 24 '14 at 12:59

score 1 · Accepted Answer · answered Sep 24 '14 at 19:38

1

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.

answered Sep 24 '14 at 19:38

Clayton Leis

1,288
9
20

Thanks a Million, that seems to have resoolved the issue, I changed the class name from search to some searhccc something< i guess I should be extra careful when I continue a website and not starting from scratch to avoid keyword-like names which are to be used a lot (y) – Peter Manoukian Sep 25 '14 at 07:50

Autosuggest jquery ajax fades out prematurely

1 Answers1