Study notes-delay query when input tag is used as search box

In the front-end development process, there are sometimes the following requirements: use the input tag as a search box, and enter content in the search box to query related results, similar to Baidu search.

The keyup event of the input box is mainly used here.


The keyup event will be triggered when we click on the keyboard. In the real development process, we need to request data through ajax. If you click once, request it. Requests will be sent frequently and this is not recommended.

So we need to wait for the search content to be entered before sending a request.

practice: 

var lastInput = null;  // 上一次输入的延迟
$('输入框input标签').on('keyup', function(event) {
    clearTimeout(lastInput);
	lastInput = setTimeout(() => {
        // 在你停止输入250ms后,发送请求
    }, 250)     
});

The above method can achieve the same effect as Baidu search, while typing, the search results will be displayed after typing.

Guess you like

Origin blog.csdn.net/qq_41339126/article/details/113334406