Question

我在一个简单的表单上有一个搜索输入框，可以根据输入的内容自动获取远程数据。 触发搜索至少需要3个字符。

e.g。键入smi将检索姓氏以“smi”开头的所有员工。例如。史密斯，史密森等等

我想我的问题是，如果我输入“Smit”，则会进行2次搜索。我希望有可能：

仅在满足最低3个字符要求时才进行搜索
仅在暂停时搜索

这可能吗？如果有，怎么样？

非常感谢

Answer 1

正如此JSFiddle .. 更新： 抱歉忘记了最少3个字符的条件和多请求问题

var search, timer;
$('#search1').on('keyup', function () {
    search = $('#search1').val();
    $('#result').html('Min 3 characters');
    if(search.length > 2){ //min char number 3
	clearTimeout(timer);
        $('#result').html('loading..');
	timer =	setTimeout(function () {
    	    $('#result').html(search);
	}, 2000); // time to wait before executing, 2000 milli seconds here
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="search" id="search1" />
<p id="result"></p>

Answer 2

是的，您使用setTimeout，并在按下某个键时取消超时：

(function() {
    var timeout = null;
    var waitTimeMilliseconds = 500; //how many milliseconds the pause must be
    var minLength = 3;
    $("input").on("keydown", function() {
        if (timeout !== null) {
            clearTimeout(timeout);
        }
        if ($(this).val().length >= minLength) {
            timeout = setTimeout(function() {
                lookup();
            }, waitTimeMilliseconds);
        }
    });
})();

Answer 3

你可以使用去抖功能来做到这一点。 Lodash（和下划线）有一个你可以使用的。或者，如果你不想要lodash，你可以使用jquery，或者甚至自己编写（here's a good article）。

lodash docs有这个说abo

创建一个去抖动函数，该函数延迟调用func，直到自上次调用去抖动函数后经过等待毫秒为止

应该在每次击键时调用去抖动功能，此时它会被重置，但如果在指定的时间内没有调用它，它将触发目标功能。因此，您希望在每次击键时调用去抖动，并在调用查找函数之前将其设置为等待，例如100ms。

只有在暂停

3 个答案: