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

我想延迟触发搜索，直到用户完成键入。我正在使用一个用mark.js（）构建的函数。它在用户键入时进行搜索，并在搜索时跳转到第一个结果。问题是它会在您键入时搜索每个字母组合。即：搜索“帮助”搜索“h”、“he”、“hel”、“帮助”。考虑到文档的大小，这速度慢得可笑。我可以用这个函数做些什么，让它等到用户输入完毕

以下是我正在使用的搜索功能：

    $(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();
    }
  });
});

$（函数（）{
//输入字段
var$input=$（“input[type='search']），
//清除按钮
$clearBtn=$（“按钮[data search='clear']），
//上一个按钮
$prevBtn=$（“按钮[data search='prev']），
//下一个按钮
$nextBtn=$（“按钮[data search='next']），
//要搜索的上下文
$content=$（“.container”），
//用于保存元素的jQuery对象
$results，
//将附加到当前对象的类
//聚焦元件
currentClass=“当前”，
//跳转的顶部偏移（搜索栏）
偏移量=150，
//聚焦元素的当前索引
currentIndex=0；
/**
*跳转到与currentIndex匹配的元素
*/
函数jumpTo（）{
如果（$results.length）{
var位置，
$current=$results.eq（currentIndex）；
$results.removeClass（currentClass）；
如果（$current.length）{
$current.addClass（currentClass）；
位置=$current.offset（）.top-offsetTop；
滚动到（0，位置）；
}
}
}
/**
*在中搜索输入的关键字
*输入时指定的上下文
*/
$input.on（“输入”，函数（）{
var searchVal=this.value；
$content.unmark({
完成：函数（）{
$content.mark（searchVal{
准确度：“准确”，
separateWordSearch:false，
完成：函数（）{
//筛选结果/$context.not（“：has（mark）”）.hide（）；
$results=$content.find（“标记”）；
currentIndex=0；
跳到（）；
}
});
}
});
});
/**
*清除搜索
*/
$clearBtn.on（“单击”，函数（）{
$content.unmark（）；
$input.val（“”.focus（）；
});
/**
*下一个和上一个搜索跳转到
*/
$nextBtn.add（$prevBtn）.on（“单击”，函数（））{
如果（$results.length）{
currentIndex+=$（this）.is（$prevBtn）？-1:1；
如果（当前索引<0）{
currentIndex=$results.length-1；
}
如果（当前索引>$results.length-1）{
currentIndex=0；
}
跳到（）；
}
});
});

以下是一些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>

下一个
以前的
✖

Lorem ipsum dolor sit amet，是一位杰出的献身者。非弧id三分体元素Vivamus elementum。Cras fringilla nisi erat，非ultricies leo varius eu。两名威尼斯人因怀孕而死亡。不可否认，暂时不可否认，不可否认。纳拉奎斯精英尼索。tortor molestie的整数，Dignessim odio id，pharetra nunc。梅塞纳斯权杖是一把利剑。这是一只猫，它在欧洲的地位很高。多奈克·坦普斯，自由女神阿梅特·鲁特鲁姆·波苏尔，孕妇利奥·伊普索姆·奥迪奥，伟大的苏打水。

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

比如：

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);
});

var searchTimer=null，
minLength=3，
搜索延迟=300；
$input.on（“输入”，函数（）{
//清除前一个计时器
clearTimeout（搜索计时器）；
var searchVal=this.value；
//如果没有足够的字符，不要做任何事情
如果（searchVal.length

您需要一个延时计时器。基本上，当用户按键时，启动计时器，而不是直接调用搜索功能。如果用户再次按键，则重新启动计时器。如果计时器结束，则执行搜索

var searchHandler;
var searchDelay = 300;
$('input[type="search"]').on('keydown', function(e) {
  if (searchHandler)
    clearTimeout(searchHandler);
})
$('input[type="search"]').on('keyup', function(e) {
  $('#status').html('Waiting...');
  searchHandler = setTimeout(doSearch, searchDelay)
})

doSearch = function() {
  $('#status').html('Doing the search!');
}

---

工作示例：

您可以在按下Enter键后调用搜索功能，然后调用搜索功能

例如：

$input.on("input", function(e) {

    if (e.which == 13) {
        var searchVal = this.value;
        $content.unmark({
            done: function() {
                $content.mark(searchVal, {
                    accuracy: "exactly",
                    separateWordSearch: false,
                    done: function() {
                        $results = $content.find("mark");
                        currentIndex = 0;
                        jumpTo();
                    }
                });
            }
        });
    }
}

---

我刚刚为您编写了一个小函数：

函数simpleDelayTimer（）{
var延迟=2000；
var定时器=null；
返回{
开始：
函数（）{
this.timer=setTimeout（函数（）{
警报（“在此处放置代码”）；
}，延误）；
返回计时器；
},
重置：功能（）{
clearTimeout（this.timer）；
}
}
}
var timer=simpleDelayTimer（）；
函数startTimer（）{
if（document.getElementById（'timertest'）.value.trim（）==“”）
返回；
timer.reset（）；
timer.start（）；
}

在这里输入

您只能在字符串长度超过3个字符（例如）后才能“设置间隔”或启动搜索。您使用的是什么版本的mark.js？最近发布的一个版本带来了性能优化谢谢！这似乎成功了。我可能需要做一些调整，让它在我想要的地方慢下来。我感谢你的帮助。