은 jquery로 바꿀 수 있습니다

Question

방금 ​​검색 텍스트 필드에 단어를 입력하여 mysql 데이터베이스에서 제품 정보를 검색 할 수있는 코드를 완성했으며 잘 작동합니다. 그러나이 텍스트 필드는 enter 키를 누르면 자동 완성과 같은 실시간 검색으로 변경하려고 할 때만 작동합니다.

jquery Keyup으로 변경하려고했지만 작동하지 않습니다. 텍스트 입력란에서 실시간 검색으로 변경하려면 아래 코드를 참조하십시오!

<script type="text/javascript"> 

$(function() { 
//-------------- Update Button----------------- 


$(".search_button").click(function() { 
    var search_word = $("#search_box").val(); 
    var dataString = 'search_word='+ search_word; 

    if(search_word=='') 
    { 
    } 
    else 
    { 
    $.ajax({ 
    type: "GET", 
    url: "searchdata.php", 
    data: dataString, 
    cache: false, 
    beforeSend: function(html) { 

    document.getElementById("insert_search").innerHTML = ''; 
    $("#flash").show(); 
    $("#searchword").show(); 
    $(".searchword").html(search_word); 
    $("#flash").html('<img src="ajax-loader.gif" align="absmiddle">&nbsp;Loading Results...'); 



      }, 
    success: function(html){ 
    $("#insert_search").show(); 

    $("#insert_search").append(html); 
    $("#flash").hide(); 

    } 
}); 

    } 


    return false; 
    }); 



}); 
</script> 

Answer 1

click을 keypress 또는 그와 비슷한 것으로 변경하십시오. 키 누르기를하면 짧은 지연 시간으로 타이머에 콜백 액션을 넣고 서버를 너무 세게 치지 않게 할 수 있습니다.

Check out this post on how to put a timer on.

Answer 2

당신은 확실히 개선 될 수있는 코드의 비트를 발견했습니다

$("#search_box").keyup(function() { //keyup for #search_box input 
    var search_word = $(this).val(), 
     dataString = 'search_word='+ search_word; 
    ....rest of your code 
}); 

Answer 3

처럼 .keyup()를 사용할 수 있습니다.

먼저 사용자가 키를 누를 때마다 서버에 새로운 요청이 시작된다는 점을 기억해야합니다. 이 같은 것을 해보 죠 ...

// This will be our timer to stop the server being flooded by requests 
var searchDelay; 

// How many milliseconds should we wait before we search? 
var WAIT_TIME = 120; 

// This will be our search function 
function runSearch() { 
    // Grab the value from the input 
    var search_word = $("#search_box").val(); 

    // Stop empty answers 
    if (search_word == '') return; 

    // Show your result box 
    $("#insert_search").empty(); 
    $("#flash").html('<img src="ajax-loader.gif" align="absmiddle">&nbsp;Loading Results...').show(); 
    $("#searchword").show(); 
    $(".searchword").html(search_word); 

    // We can shortcut the $.ajax with a $.get too, which will do some encoding for the URL for us. 
    $.get('searchdata.php', {search_word: search_word}, function(data) { 
     $("#insert_search").append(html).show(); 
     $("#flash").hide(); 
    }).fail(function() { 
     // What happens if the server returns an error? 
     alert('Sorry, please try again later.'); 
     }); 
} 

// Now we can very easily bind our slick new function to different events! 
$('.search_button').on('click', runSearch); 

// And if the search box is typed into... 
$('#search_box').on('keyup', function() { 
    if (typeof(searchDelay) != 'undefined') clearTimeout(searchDelay); 
    searchDelay = setTimeout(runSearch, WAIT_TIME); 
});