내 검색 양식이 처음 검색을하지 않는 이유는 무엇입니까?

Question

제 검색 양식이 처음에는 작동하지 않는다는 것이 확실합니다. 실제 검색을 수행하려면 다시 검색해야합니다. 코드에 문제가 있습니까?

Fiddle

HTML

<form id='sform' action="/admin/search.php" method="get"> 
    <input id="search" placeholder="Enter your group name..." type="search" name="s" value="" /> 
    <p></p> 
    <input type="submit" style="display:none;" /> 
</form> 

CSS

/*search bar*/ 
#sform { 
    display:inline-block; 
    position: relative; 
} 
#search { 
    border: 4px solid #999; 
    cursor: pointer; 
    height: 10px; 
    padding: 8px; 
    position: relative; 
    width: 10px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px; 
    -moz-appearance: none; 
    -webkit-appearance: none; 
} 
#search:hover { 
    border-color: #199ed9; 
} 
#search:focus { 
    border-color: #199ed9; 
    outline: none; 
    width: 180px; 
    -moz-transition: all .2s ease-in-out; 
    -webkit-transition: all .2s ease-in-out; 
} 
#search.searching { 
    margin-left: 80px; 
    width: 10px; 
    -moz-transition: all .2s ease-in-out; 
    -webkit-transition: all .2s ease-in-out; 
} 
#search + p { 
    background: #999; 
    content:''; 
    cursor: pointer; 
    display: block; 
    height: 10px; 
    position: absolute; 
    right: 10px; 
    top: -22px; 
    width: 4px; 
    -moz-border-radius: 1px; 
    -webkit-border-radius: 1px; 
    border-radius: 1px; 
    -moz-transform: rotate(135deg); 
    -webkit-transform: rotate(135deg); 
    -moz-transform-origin: center 20px; 
    -webkit-transform-origin: center 20px; 
} 
#search + p:hover, #search:hover + p, #search:focus + p { 
    background: #199ed9; 
} 
#search.searching + p { 
    -moz-animation: rotateHandle .6s linear 6; 
    -webkit-animation: rotateHandle .6s linear 6; 
} 
@-webkit-keyframes rotateHandle { 
    from { 
     -webkit-transform: rotate(135deg); 
    } 
    to { 
     -webkit-transform: rotate(-225deg); 
    } 
} 
@-moz-keyframes rotateHandle { 
    from { 
     -moz-transform: rotate(135deg); 
    } 
    to { 
     -moz-transform: rotate(-225deg); 
    } 
} 
/*end of search bar*/ 

JS

$(function(){ 
//expand search bar 
var okToSubmit = false; 
$("#sform").submit(function (e) { 
    if (!okToSubmit) { 
     e.preventDefault(); 
     $("#search").addClass('searching').val(''); 
     var url = $(this).attr('action'); 

     setTimeout(function() { 
      $.ajax({ 
       type: 'POST', 
       url: url, 
       data: $(this).serialize(), 
       timeout: 8000, 
       success: function (r) { 
        $("#search").removeClass('searching'); 
       } 
      }); 
      okToSubmit = true; 
     }, 8000); 
    } 
}); 
}); 

Answer 1

문제는 아약스에 있습니다. Ajax의 A는 비동기식을 의미합니다. 실행 순서를 보장 할 수 없거나 8 초 이내에 ajax 요청이 완료 될 것이라고 보장 할 수 없습니다.

function doAjax() { 
    $.ajax({ 
     type: 'POST', 
     url: url, 
     data: $('#sform').serialize(), 
     timeout: 8000, 
     success: function (r) { 
      $("#search").removeClass('searching'); 
      okToSubmit = true; 
     } 
    }); 
    setInterval(doAjax, 8000); 
} 

는 다음과 같이 함수를 호출 : 당신이 무엇을하고 있는지 또한

, okToSubmit 성공 처리기에서하고 대신이 작업을 수행해야

$(function() { 
    //expand search bar 
    var okToSubmit = false; 
    $("#sform").submit(function (e) { 
     if (!okToSubmit) { 
      e.preventDefault(); 
      $("#search").addClass('searching').val(''); 
      var url = $(this).attr('action'); 
      doAjax(); 
     } 
    }); 
}); 

이 보장됩니다 하나 개 요청합니다 두 번째 요청을하기 전에 완료해야합니다.

이 1.8 이하 JQuery와 버전을 사용하는 경우, 당신은 당신의 제공 바이올린에서 일하고 당신의 $.ajax({});

Answer 2

에 async:false 속성을 추가 할 수 있습니다. 그러나 제출하기 전에 값을 비우는 .val('') 호출을 제거해야합니다.

var okToSubmit = false; 
    $("#sform").submit(function (e) { 
     e.preventDefault(); 
     if (!okToSubmit) { 
      $("#search").addClass('searching'); 
      var url = $(this).attr('action'); 
      setTimeout(function() { 
       $.ajax({ 
        type: 'POST', 
        url: url, 
        data: $(this).serialize(), 
        timeout: 8000, 
        success: function (r) { 
         alert('search result:'+ r); 
         $("#search").removeClass('searching'); 
         okToSubmit = true; 
        } 
       }); 
      }, 8000); 
     } 
    }); 

Answer 3

그것은 보인다 이제 다음 작업 :

$("#sform").submit(function (e) { 
        $("#search").addClass('searching'); 
        var url = $(this).attr('action'); 
        $.ajax({ 
          type: 'POST', 
          url: url, 
          data: $(this).serialize(), 
          timeout: 8000, 
          success: function (r) { 
            $("#search").removeClass('searching'); 
          } 
        }); 

    });