検索フィールドが空の場合、結果divを非表示にする - Ajax Live Search

Question

私のプロジェクトのために簡単なAjax Live Searchを作成しようとしています.Javascriptは私の強みではありません。検索フレーズが0より大きい場合、AJAXリクエストを作成し、htmlを設定し、result-divを（SlideDownで）表示する必要があります。フレーズの長さが0に戻った場合、result-divは上にスライドします。

私の問題は、長さが0に戻ったときに、長さ1のフレーズによって行われたAJAX呼び出しがまだ（非同期要求のため）実行されておらず、結果div入力フィールドが空であっても、その最後のリクエストからのものです。

Ex。私は "馬"を検索し、すべて正常に動作します。次に、入力が空になるように文字を削除すると、divがスライドしてから、検索結果「H」で再びスライドします。

どうすれば解決できますか？

コード

let delayTimer; 
$('.search').on('keyup', function() { 
    let phrase = $(this).val(); 

    if (phrase.length > 0) { 

     clearTimeout(delayTimer); 

     delayTimer = setTimeout(function() { 
       $.ajax({ 
        type: 'post', 
        url: '.......', 
        data: { 
         phrase: phrase 
        }, 
        success: function (response) { 
         let el = $('#search-result'); 

         if (response.type == 'success') { 
          el.html(response.html) 
         } else if (response.type == 'error') { 
          el.html(response.message) 
         } 
        }, 
        complete: function() { 
         let el = $('#search-result'); 

         if (el.is(':hidden')) { 
          el.slideDown(300) 
         } 
        } 
       }); 
     }, 350); 
    } else { 
     let el = $('#search-result'); 

     if (el.is(":visible")) { 
      el.stop().slideUp(300); 
     } 
    } 
}); 

Answer 1

これは実際には非常に簡単です。単に.abort()を使用してajax()リクエストを中止することができます。したがって、ajax()コールを変数に割り当てます（例： "my_ajax_request"）。検索フィールドに0文字がある場合は、my_ajax_request.abort();