자동 불과 3 자

Question

1 개 문자 입력에이 코드를 표시 자동 제안 입력에 좋습니다. 3 개 그림과 같이 문자

<script> 
$(document).ready(function(){ 
    $("#main-keywords").keyup(function(){ 
     $.ajax({ 
     type: "POST", 
     url: "readkeyword.php", 
     data:'keyword='+$(this).val(), 
     beforeSend: function(){ 
      $("main-keywords").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px"); 
     }, 
     success: function(data){ 
      $("#suggesstion-box").show(); 
      $("#suggesstion-box").html(data); 
      $("#main-keywords").css("background","#FFF"); 
     } 
     }); 
    }); 
}); 

function selectCountry(val) { 
$("#main-keywords").val(val); 
$("#suggesstion-box").hide(); 
} 
</script> 

Answer 1

.length으로 #main-keywords에 입력 된 문자의 개수 길이의 분을 입력에서만 작동하도록 자동 제안을 변경하는 방법 : - 아약스 전에 문자

$(document).ready(function(){ 
    $("#main-keywords").keyup(function(){ 
     if($(this).val().length > 2) // add this line 
     { 
     $.ajax({ 
     type: "POST", 
     url: "readkeyword.php", 
     data:'keyword='+$(this).val(), 
     beforeSend: function(){ 
      $("main-keywords").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px"); 
     }, 
     success: function(data){ 
      $("#suggesstion-box").show(); 
      $("#suggesstion-box").html(data); 
      $("#main-keywords").css("background","#FFF"); 
     } 
     }); 
    } 
    }); 
}); 

Answer 2

체크 길이 :

$(document).ready(function(){ 

    $("#main-keywords").keyup(function(){ 
     var len = $(this).length; // get length here 

     if(len >= 3) { // if 3 characters entered..proceed 
     $.ajax({ 
     type: "POST", 
     url: "readkeyword.php", 
     data:'keyword='+$(this).val(), 
     beforeSend: function(){ 
      $("main-keywords").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px"); 
     }, 
     success: function(data){ 
      $("#suggesstion-box").show(); 
      $("#suggesstion-box").html(data); 
      $("#main-keywords").css("background","#FFF"); 
     } 
     }); 
     } 
    }); 

}); 

Answer 3

은 내가 미래의 독자를 위해이 글을 쓰는 당신은 최적화 작업을 수행 할 수있어, 당신이 답을 가지고 알고있다. 코드에서

, 당신이 입력하거나 텍스트 상자에 삭제 모든 문자에 대한 AJAX 요청을 만드는 일을하고 있습니다. 이것은 한 번에 너무 많은 비동기 서버 요청을 만들 것이므로 좋지 않은 일입니다. 이로 인해 서버에 너무 많은 부하가 발생할 수 있습니다. 당신이해야 할 일은

는 텍스트 상자에 작성 후 몇 시간 동안 서버 요청하는 경우에만 사용자의 일시 정지를 할 수 있습니다.

당신은 이것에 대한 https://jqueryui.com/autocomplete/#remote을 사용할 수 있습니다, 그들은 매우 잘 취급했다.

JSON의 경우 데이터 유형 : https://jqueryui.com/autocomplete/#remote-jsonp