gpt4 book ai didi

javascript - Jquery - 延迟搜索直到输入完成

转载 作者:行者123 更新时间:2023-11-30 15:32:57 25 4
gpt4 key购买 nike

我想延迟触发我的搜索,直到用户完成输入。我正在使用用 mark.js ( https://markjs.io ) 构建的函数。它在用户键入时进行搜索,并在搜索时跳转到第一个结果。问题是它会在您键入时搜索每个字母组合。 I.E:搜索“help” 搜索“h”、“he”、“hel”、“help”。考虑到文档的大小,这速度慢得离谱。我可以用这个函数做些什么来让它等到用户完成输入吗?

这是我正在使用的搜索功能:

    $(function() {

// the input field
var $input = $("input[type='search']"),
// clear button
$clearBtn = $("button[data-search='clear']"),
// prev button
$prevBtn = $("button[data-search='prev']"),
// next button
$nextBtn = $("button[data-search='next']"),
// the context where to search
$content = $(".container"),
// jQuery object to save <mark> elements
$results,
// the class that will be appended to the current
// focused element
currentClass = "current",
// top offset for the jump (the search bar)
offsetTop = 150,
// the current index of the focused element
currentIndex = 0;

/**
* Jumps to the element matching the currentIndex
*/
function jumpTo() {
if ($results.length) {
var position,
$current = $results.eq(currentIndex);
$results.removeClass(currentClass);
if ($current.length) {
$current.addClass(currentClass);
position = $current.offset().top - offsetTop;
window.scrollTo(0, position);
}
}
}

/**
* Searches for the entered keyword in the
* specified context on input
*/
$input.on("input", function() {
var searchVal = this.value;
$content.unmark({
done: function() {
$content.mark(searchVal, {
accuracy: "exactly",
separateWordSearch: false,
done: function() {
//Filter Results//$context.not(":has(mark)").hide();
$results = $content.find("mark");
currentIndex = 0;
jumpTo();
}
});
}
});
});

/**
* Clears the search
*/
$clearBtn.on("click", function() {
$content.unmark();
$input.val("").focus();
});

/**
* Next and previous search jump to
*/
$nextBtn.add($prevBtn).on("click", function() {
if ($results.length) {
currentIndex += $(this).is($prevBtn) ? -1 : 1;
if (currentIndex < 0) {
currentIndex = $results.length - 1;
}
if (currentIndex > $results.length - 1) {
currentIndex = 0;
}
jumpTo();
}
});
});

这是一些 HTML:

<input type="search" placeholder="Search" class="text-input" style="height: 28px; border-style: solid; border-color: black; border-width: 1px; margin-bottom: 3px;">
<br/>
<button data-search="next">Next</button>
<button data-search="prev">Previous</button>
<button data-search="clear">✖</button><br/>
<div class="container">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum non arcu id tristique. Cras fringilla nisi erat, non ultricies leo varius eu. Duis venenatis enim sed tristique gravida. Nulla dolor augue, tempor non nisl eget, consequat consequat magna. Nulla quis elit nisl. Integer at tortor molestie, dignissim odio id, pharetra nunc. Maecenas scelerisque porta erat bibendum aliquet. Proin est felis, pretium sit amet consequat eu, aliquet ac erat. Donec tempus, libero sit amet rutrum posuere, leo ipsum gravida odio, quis sodales magna nisl ut lectus.
</div>
</div>

最佳答案

您可以使用计时器限制搜索功能的初始化,并检查是否存在最小字符数

类似于:

var searchTimer = null,
minLength = 3,
searchDelay = 300;

$input.on("input", function() {
// clear previous timer
clearTimeout(searchTimer);

var searchVal = this.value;

// don't do anything if not enough characters
if (searchVal.length < minLength) {
return;
}

// start new timer
searchTimer = setTimeout(function() {
$content.unmark({
done: function() {
$content.mark(searchVal, {
accuracy: "exactly",
separateWordSearch: false,
done: function() {
//Filter Results//$context.not(":has(mark)").hide();
$results = $content.find("mark");
currentIndex = 0;
jumpTo();
}
});
}
});
}, searchDelay);
});

关于javascript - Jquery - 延迟搜索直到输入完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41982172/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com