特定の要素をクリックすると、入力時に.blur（）をアクティブにする必要はありません

Question

私は自分自身で自動提案を書いていますが、フォーム入力の代わりに実際にはリンクや画像のHTMLリストを生成しますそれはAJAXリクエストから直接得られます。私が遭遇した問題の1つは、入力がフォーカスを失った場合、生成されたリストを隠す必要があるということです。しかし、これは生成されたリスト内のリンクをクリックしようとしたときにも起こります。

はここに私のコードです：

var delay = false; 
var landing = $('#suggestions'); 
$('#suggest').keyup(function(e) { 
    if (e.keyCode > 40 || e.keyCode == 8) { //If a letter or backspace 
     if(this.value.length >= 3) { // if > 3 characters in the input 
      $(this).addClass('loading'); 
      clearTimeout(delay); 
      var query = this.value; 
      delay = setTimeout(function() { 
       $.ajax({ 
        url: '/response.php', //returns HTML 
        type: 'get', 
        data: { 'q' : query }, 
        dataType: 'html', 
        success: function(data) { 
         $('#suggest').removeClass('loading'); 
         landing.show().html(data); 
        } 
       }); 
      }, 200); 

     } else { 
      landing.empty(); 
     } 
    } 

}) 

.focus(function() { 
    if($(this).val() == 'Search...') { 
     $(this).val(''); 
    } 

    if($(this).length) { 
     landing.show(); 
    } 
}) 

.blur(function() { 
    if(this.value.length) { 
     setTimeout(function() { 
      landing.hide(); 
     }, 150) 
    } else { 
     $(this).val('Search...'); 
    } 
}) 

.attr('autocomplete', 'off'); 

.blur（）問題が発生しているが、私はタイムアウトを追加しようとしましたが、これは、非常に信頼性がないことが証明されています。

また、私がこれまでに書かれたものを改善するための任意のコメント/提案をいただければ幸いです！私が思い付いたてきた最適なソリューションを試したくさんの後

は#suggestions着陸<div>上の変数を「持続」を切り替えているので、ユーザーは#suggestionsに何かをやっている場合は、 `ブラーは（）` `何もしませんボックス：

$('#suggest').blur(function() { 
    if(this.value.length) { 
     if(landingPersist == false) { 
      landing.hide(); 
     } 
    } else { 
     $(this).val('Search Knowledge Base'); 
    } 
}) 

$('#suggestions').mouseover(function() { 
    landingPersist = true; 
}) 

.mouseout(function(){ 
    landingPersist = false; 
}); 

このメソッドはlive（）またはタイマーを必要としないことが良いことだと思います。 #suggestのblur()における持続変数のチェックで 。これは

Answer 1

最初に会った、このようにグローバルvarible（任意の関数外）を追加します。

var _hideLandingTimer = 0; 

第二に、blurにコードを変更：

_hideLandingTimer = setTimeout(function() { 
      landing.hide(); 
     }, 150); 

そして最後に、この持っている：

を

$('#suggest a').click(function() { 
    window.clearTimeout(_hideLandingTimer); 
}); 

これは、リンクがクリックされた場合にタイマーをクリアし（したがって、着陸を隠すことはない）