Question

我有一个使用jQuery ajax构建的基本实时搜索，该搜索可从服务器搜索JSON文件并输出事件列表。

设置我的脚本，以便如果搜索文本框少于2个字符，则该脚本应显示用户使用ajax搜索之前已在页面上显示的事件列表。

var currentEvents = $(".event-list-container").contents();

    if(searchField.length < 2)
    {
        if(currentRequest != null) {
            currentRequest.abort();
        }

        $('.event-list-container').empty();
        $('.event-list-container').append(currentEvents);
    }

我遇到的问题是，如果用户要快速清空文本框（例如通过执行CTRL + A和退格键），则会显示currentEvents，然后显示ajax请求，因此删除{ {1}}，并显示用户清空之前在搜索文本框中显示的结果。

以下是完整的脚本：

currentEvents

您可以在$(document).ready(function () { var currentEvents = $(".event-list-container").contents(); var currentRequest = null; var searchField; var expression; $.ajaxSetup({ cache: false }); $('#refine-event-txtbox').keyup(function () { searchField = $('#refine-event-txtbox').val(); expression = new RegExp(searchField, "i"); if(searchField.length < 2) { if(currentRequest != null) { currentRequest.abort(); } $('.event-list-container').empty(); $('.event-list-container').append(currentEvents); } else { searchEvents(currentRequest, searchField, expression); } }); function searchEvents(currentRequest, searchField, expression) { currentRequest = jQuery.ajax({ type: 'GET', url: 'http://127.0.0.1:8000/api/events', success: function(data) { $('.event-list-container').empty(); $.each(data, function (key, value) { if (value.title.search(expression) != -1 || value.location.search(expression) != -1) { var startDate = value.startDate; var startDateDay = moment.utc(startDate).format('D'); var startDateMonth = moment.utc(startDate).format('MMM'); var fullDate = moment.utc(startDate).format('D MMM YYYY'); var eventURL = "/events/" + value.id + "/" + value.title; eventURL = eventURL.replace(/\s+/g, '-').toLowerCase(); $('.event-list-container').append( `<div class="event-box"> <div class="row"> <div class="col-xs-12 col-sm-2 col-md-2 col-lg-1"> <div class="date"> <p class="day">${startDateDay}</p> <p class="month">${startDateMonth}</p> </div> </div> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3"> <div class="event-image"> <a href="${eventURL}"> <img class="img-responsive" src="${value.image}"> </a> </div> </div> <div class="col-xs-12 col-sm-6 col-md-7 col-lg-7"> <div class="event-details"> <h2 class="title"> <a href="${eventURL}">${value.title}</a> </h2> <p class="when"><span class="inline-title">When: </span>${fullDate} | ${value.startTime}-${value.finishTime}</p> <p class="where"><span class="inline-title">Where:</span>${value.location}</p> </div> </div> </div> </div> `); } }); }, error:function(e){ // Error } }); }});函数内部看到，如果搜索字段的长度设置为小于2，则应检查是否存在ajax请求，如果是，则中止该请求，但脚本没有执行这个。

Answer 1

您可以从功能searchEvents中删除 currentRequest 的引用。

函数调用：

searchEvents(searchField, expression);

和功能：

 function searchEvents(searchField, expression) {
    .......
 }

立即尝试..！

Answer 2

弄清楚了。将以下内容添加到我的ajax函数中，以及执行Shitole的答案似乎可以解决问题。

df.groupby(df.columns.tolist(),as_index=False).size()

Ajax请求不会中止

2 个答案: