我需要jquery脚本来做以下事情
在文本字段中键入时，"加载"文本需要显示在文本字段附近。如果我停止输入"加载"文本需要更改为"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> </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，加载等）
请做需要的。谢谢
我认为最好的方法是使用 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我没有测试代码:)
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('');
};