搜索栏 - 使用 Ajax 和 JQuery 动态添加内容答案

【问题标题】：Search bar - Add content Dynamicly with Ajax and JQuery搜索栏 - 使用 Ajax 和 JQuery 动态添加内容
【发布时间】：2021-06-02 17:08:40
【问题描述】：

我正在尝试制作一个动态加载内容的搜索栏。

但是我希望真正的内容加载在用户结束输入之后开始。

我尝试了这个版本，但它不起作用，因为它没有计算每个事件“keyup”。

let old_search = ""
let search = ""


$("#search_input").on('keyup paste',function(){

    $("#loader_active").show()
    $('#videos').empty()


    let old_search = $("#recherche").val()

    setTimeout(function (){
        search = $("#search_input").val()
        console.log(old_search + ">" + search)
        if (search == old_search){
            console.log("loading")
            start = 0;
            limit = 20;
            load(search, start, limit);
            start += limit;
        }
    }, 1000);

});

function load(search, start=0, limit=20) {

  $("#loader_active").show()

  let form_data = new FormData();
  form_data.append('search', search);
  form_data.append('start', start);
  form_data.append('limit', limit);


  $.ajax({

    url: "http://website.com/ajax/videos.php",
    contentType: false,
    dataType: "json",
    processData: false,
    cache: false,
    data: form_data,
    type: 'POST',

    success: function (data) {
      $(data).each(function(index, value) {
        showVideo(value) // show video creates divs with jquery     containing the data from the json received by the ajax call
      })
      $("#loader_active").hide()

    }
  })
}

有没有人知道任何解决方案？

【问题讨论】：

如何指定搜索查询的结尾？你是说1s之后？你能解释一下你的代码发生了什么吗？我们看到在“KeyUps”之间，延迟查询是可能的。所以在回答这个问题之前，我们最好先了解一下预期的结果。这里的加载函数正在处理ajax调用..如何？
我希望仅在用户没有在搜索输入中输入任何内容 1 秒后才发送搜索请求。为了更容易理解，我添加了加载函数

标签： javascript jquery ajax search

【解决方案1】：

您可以做的是让您的函数重置一个触发器，该触发器将在 x 时间后触发。比如：

function myCoolFunction(myParameters) {
    //Clear the timeout every time this happens
    clearTimeout(window.myTimeout);

    //Create a new timeout
    window.myTimeout = setTimeout(function() {
        //Do Something after 1 second
    }, 1000);
}

$(".selector").on('keyup paste', function (){
  myCoolFunction(myParameters);
});

这将在最后一次“keyup/paste”之后执行 1 秒。 :D

【讨论】：