php - jquery在按键上显示加载文本

Question

我需要以下的 jquery 脚本

在文本字段内输入时，需要在文本字段附近显示“加载”文本。如果我停止输入“加载”文本需要更改为“删除”如果单击此“删除”文本，则应清除文本字段。

同时，我需要显示输入文本的搜索结果。

为此，我使用了以下脚本

 $("#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> 我必须显示文本（删除，加载等......）

请只做那些需要的。谢谢

Answer 1

我认为最好的方法是使用 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我没有测试代码:)

Answer 2

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('');
};