[英]jquery ajax loads list of results even there's nothing to query
因此,我正在从有关jquery和ajax的教程中学习,直到现在,我都有一个用于搜索并返回搜索结果的搜索表单。 而且效果很好。 但是,当我从表单中删除单词或将单词退格时,它将所有状态加载到列表中。 我该怎么做才能仅在有单词的情况下返回,而在表单中没有单词的情况下什么也不返回。
status.html的代码段:
{% block add_account %}
<input type="text" id="search" name="search" />
<ul id="search-results">
</ul>
{% endblock %}
ajax.js:
$(function() {
$('#search').keyup(function() {
$.ajax({
type: "POST",
url: "/status/search_status/",
data: {
'search_text' : $('#search').val(),
'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
},
success: searchSuccess,
dataType: 'html'
});
});
});
function searchSuccess(data, textStatus, jqXHR)
{
$('#search-results').html(data)
}
ajax.html:
{% if statuss.count > 0 %}
{% for status in statuss %}
<li><a href="/status/get/{{status.id}}/">{{status.status}}</a></li>
{% endfor %}
{% else %}
<p>None to show</p>
{% endif %}
views.py
def search_status(request):
if request.method == "POST":
search_text = request.POST['search_text']
else:
search_text=''
statuss = Status.objects.filter(status__icontains = search_text)
return render(request, 'ajax_search.html', {'statuss':statuss})
$('#search').keyup(function () {
if (!$.trim(this.value).length) return; //<< returns from here if nothing to search
$.ajax({
type: "POST",
url: "/status/search_status/",
data: {
'search_text': $('#search').val(),
'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
},
success: searchSuccess,
dataType: 'html'
});
});
顺便说一句,如果用户输入速度太快,则应限制键入请求,以避免多次呼叫:
(function () {
var throttleTimer;
$('#search').keyup(function () {
clearTimeout(throttleTimer);
throttleTimer = setTimeout(function () {
if (!$.trim(this.value).length) return;
$.ajax({
type: "POST",
url: "/status/search_status/",
data: {
'search_text': $('#search').val(),
'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
},
success: searchSuccess,
dataType: 'html'
});
}, 100);
});
}());
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.