延迟输入上的JavaScript，因此输入到搜索字段的每个字符确实会发射功能

发布于 2025-02-13 14:26:58 字数 474 浏览 1 评论 0原文

我有一个搜索字段，可让用户过滤从数据库返回的结果。我设置了设置，以便搜索字段具有.on（'input'，function（）{，它将触发另一个函数。

这会提出一个问题，在这种问题中，如果用户搜索“ crumble “将为用户输入的每个字符触发AJAX请求。

是否可以延迟JavaScript，以便如果用户正在搜索产品，则不会针对每个字符启动该功能，但是在检测到时会触发。那是用户尚未进一步键入。即用户在搜索的内容中键入

$(document).ready(function () {
  $('#cards-search').on('input', function() {
    cards_page = ''
    cards_search = this.value;
    get_card_data()
  });
});

原文

I have a search field to allow users to filter the results that are returned from the database. I have it set so that the search field has a .on('input', function() { which will trigger another function.

This poses a problem in which if a user was to search for "crumble" the ajax request will be triggered for each character the user types in.

Is there a way to delay the JavaScript so that if the user is searching for a product, the function isn't fired for each character inputted, but will trigger when detected that the user hasn't typed something further in. I.E. when the user is done typing in what that are searching.

Code:

$(document).ready(function () {
  $('#cards-search').on('input', function() {
    cards_page = ''
    cards_search = this.value;
    get_card_data()
  });
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寄意 2025-02-20 14:26:58

尝试一下，这称为辩论，以防万一您需要搜索更多有关它的信息

$(document).ready(function () {
    let oldTimeout = null;
    let timeToWaitBeforeSending = 1000 //ms
    $('#cards-search').on('input', function () {
        if (oldTimeout !== null) {
            clearTimeout(oldTimeout);
        }
        timout = setTimeout(() => {
            cards_page = '';
            cards_search = this.value;
            get_card_data();
        }, timeToWaitBeforeSending );
    });
});

try this, this is called debouncing in case u need to search more about it

$(document).ready(function () {
    let oldTimeout = null;
    let timeToWaitBeforeSending = 1000 //ms
    $('#cards-search').on('input', function () {
        if (oldTimeout !== null) {
            clearTimeout(oldTimeout);
        }
        timout = setTimeout(() => {
            cards_page = '';
            cards_search = this.value;
            get_card_data();
        }, timeToWaitBeforeSending );
    });
});

回复收藏 0 原文

时光匆匆的小流年 2025-02-20 14:26:58

// 运行JavaScript时用户完成时用户完成输入而不是键上吗？

            var typingTimer;                
            var doneTypingInterval = 5000;  

            //on keyup, start the countdown
             $('#cards-search').on('keyup', function () {
            clearTimeout(typingTimer);
            typingTimer = setTimeout(doneTyping, doneTypingInterval);
            });

            //on keydown, clear the countdown 
             $('#cards-search').on('keydown', function () {
            clearTimeout(typingTimer);
            });

            //user is "finished typing," do something
            function doneTyping () {
            //do something

                console.log("DOne");
            }

// Run javascript function when user finishes typing instead of on key up?

            var typingTimer;                
            var doneTypingInterval = 5000;  

            //on keyup, start the countdown
             $('#cards-search').on('keyup', function () {
            clearTimeout(typingTimer);
            typingTimer = setTimeout(doneTyping, doneTypingInterval);
            });

            //on keydown, clear the countdown 
             $('#cards-search').on('keydown', function () {
            clearTimeout(typingTimer);
            });

            //user is "finished typing," do something
            function doneTyping () {
            //do something

                console.log("DOne");
            }

回复收藏 0 原文

茶底世界 2025-02-20 14:26:58

遵循Vlaz建议，我研究了bebouncing，这正是我所需要的。

我遵循步骤在这里

html

<input type="search" id="cards-search" onkeyup="cardSearchChange()"...

：

function debounce(func, timeout = 250){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

function card_search() {
  cards_page = '';
  cards_search =  document.getElementById('cards-search').value;
  get_card_data();
}
cardSearchChange = debounce(() => card_search());

Following VLAZ advice I looked into debouncing and it is exactly what I needed.

I followed the steps here

HTML:

<input type="search" id="cards-search" onkeyup="cardSearchChange()"...

Javascript:

function debounce(func, timeout = 250){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

function card_search() {
  cards_page = '';
  cards_search =  document.getElementById('cards-search').value;
  get_card_data();
}
cardSearchChange = debounce(() => card_search());

回复收藏 0 原文

~没有更多了~