0

検索テキスト フィールドに単語を入力して、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>
4

3 に答える 3

2

次のように.keyup()を使用できます

$("#search_box").keyup(function() { //keyup for #search_box input
    var search_word = $(this).val(),
        dataString = 'search_word='+ search_word;
    ....rest of your code
});
于 2013-10-21T03:28:07.507 に答える
1

あなたのコードに間違いなく改善できる部分を見つけました。

まず、ユーザーがキーを押すたびに、サーバーへの新しい要求が開始されることを覚えておくことが重要です。このようなことをしましょう...

// 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);
});
于 2013-10-21T03:49:00.470 に答える
1

キープレスなどに変更clickします。キープレスを行う場合は、コールバック アクションを短い遅延時間のタイマー内に配置して、サーバーに負荷がかかりすぎないようにすることをお勧めします。

タイマーの付け方はこちらの記事を参考にしてください。

于 2013-10-21T03:27:59.533 に答える