0

次のjqueryスクリプトが必要です

テキスト フィールド内に入力している間、'Load' テキストをテキスト フィールドの近くに表示する必要があります。入力をやめると、「Load」テキストを「Del」に変更する必要があります。この「Del」テキストをクリックすると、テキスト フィールドがクリアされます。

その間、入力したテキストの検索結果を表示する必要があります。

このために、次のスクリプトを使用しました

 $("#lets_search").keyup(function() {
                var value = $('#str').val();
                $.post('db_query.php',{value:value}, function(data){
                    $("#search_results").html(data);

                });

                return false;
            });
        });

これがファイルのhtml部分です

 <form id="lets_search" action="" style="width:400px;margin:0 auto;text-align:left;">
            Search:
            <div>&nbsp;</div>
            <div style="float:left; width:250px;">
            <div style="background-color:#fff; padding:3px; width:200px; float:left; border-left:1px solid #eee; border-top:1px solid #eee; border-bottom:1px solid #eee;">
            <input name="str" id="str" type="text" style="border:0px; width:150px;">
            <div style="float:right; padding-top:3px;" id="loader">Load</div>
            </div>

            </div>

         </form>
 <div id="search_results"></div>

これ<div style="float:right; padding-top:3px;" id="loader">Load</div> で、テキストを表示する必要があります（del、Loadingなど...）

必要なことをしてください。ありがとう

4

2 に答える 2

2

これを行う最善の方法は、次のように setTimeout を使用することだと思います。

var pTimeout = null;

$("#lets_search").keyup(function() 
{
    var value = $('#str').val();
    $('#loader').text('Loading...').unbind('click');
    if(pTimeout) clearTimeout(pTimeout);
    pTimeout = setTimeout(function () { GetResult(value); }, 50);
});

function GetResult(value)
{
    $.post('db_query.php',{value:value}, function(data){
        pTimeout = null;

        $('#loader').text('del').click(function () {
            $("#search_results").empty();
            $('#str').val('');
        });

        $("#search_results").html(data);
    });
}

それを行うためのより良い方法は常にありますが、アイデアを提供する必要があります.

PS私はコードをテストしませんでした:)

于 2012-04-27T12:10:02.670 に答える
0 
var searchTimeout = null;

$("#str").keyup(function() {

  // Clear any existing timeout
  if (searchTimeout) {
    clearTimeout(searchTimeout);
  }

  // Put "Load" text in
  $('#loader').html('Load');

  // Set a timeout for end of typing detection
  searchTimeout = setTimeout(function() {
    $('#loader').html('<a href="#" onclick="clearSearch();">Del</a>');
  }, 500);

  // Get the value from the text field and send it to the server
  var value = $(this).val();
  $.post('db_query.php',{value:value}, function(data){
    $("#search_results").html(data);
  });

});

// Clears the search box value
function clearSearch() {
  $("#str").val('');
};
于 2012-04-27T12:12:48.917 に答える