javascript - jQuery 搜索过滤器动画淡入/淡出重复

Question

嘿，我正在尝试阻止动画在用户在文本框中输入单词时多次“闪烁”。

这是 jQuery 搜索代码:

$('#searchTxtBox1, #searchTxtBox2').keyup(function() {
   var input = $(this).val();
   var _this = $('#' + $(this).attr('data-id') + ' .select3-multiple-selected-item');
   var theLeanth = $(this).val().length;

   switch(true){
    case input === '':
        _this.animate({"opacity": 1.0}, 250);
        break;
    default:
        _this.animate({"opacity": 0.2}, 250);
        _this.filter('[data-searchBox*="' + input.toLowerCase() + '"]').animate({"opacity": 1.0}, 250);             
    break;
   }
});

和 HTML:

<div>
    <input style="margin-bottom:1em ;" data-id="Inventory1" id="searchTxtBox1" placeholder="Search..." class="form-control">
</div>
<h1>jQuery jSearch Plugin Demo</h1>
<ul class="list-group">
    <div class="select3-multiple-input-container" id="Inventory1">
        <li class="select3-multiple-selected-item item list-group-item list-group-item-success" data-searchBox="vegan pizza">vegan pizza</li>
        <li class="select3-multiple-selected-item item list-group-item list-group-item-info" data-searchBox="coke soda">coke soda</li>
        <li class="select3-multiple-selected-item item list-group-item list-group-item-warning" data-searchBox="cheese pizza">cheese pizza</li>
        <li class="select3-multiple-selected-item item list-group-item list-group-item-danger" data-searchBox="pepsi soda">pepsi soda</li>
        <li class="select3-multiple-selected-item item list-group-item list-group-item-success" data-searchBox="chocolate cake">chocolate cake</li>
        <li class="select3-multiple-selected-item item list-group-item list-group-item-info" data-searchBox="glaze donut">glaze donut</li>
        <li class="select3-multiple-selected-item item list-group-item list-group-item-warning" data-searchBox="cheese cake">cheese cake</li>
        <li class="select3-multiple-selected-item item list-group-item list-group-item-danger" data-searchBox="cream donut">cream donut</li>
    </div>
</ul>

上面的代码确实有效，并将所需键入的单词从列表中过滤出来，但对于在文本框中键入的每个字母，它会继续闪烁(动画不透明度进出)。

我需要修改什么才能只允许代码的 .filter 部分仅在完成输入后触发(或者在输入时触发，因为这是一个实时搜索过滤器)？

Answer 1

这是一个工作示例。在 keyup 上添加 setTimeout 就可以了。

var to;
$('#searchTxtBox1, #searchTxtBox2').keyup(function() {
   var input = $(this).val();
   var _this = $('#' + $(this).attr('data-id') + ' .select3-multiple-selected-item');
  if(to) { // If a timeout object is set and you are still typing, cancel it
    clearTimeout(to);
    to = null;
  }
  to = setTimeout(function() {
    if(!_this) {
      return;
    }
    switch(true){
      case input === '':
        _this.animate({"opacity": 1.0}, 250);
        break;
      default:
        _this.animate({"opacity": 0.2}, 250);
        _this.filter('[data-searchBox*="' + input.toLowerCase() + '"]').animate({"opacity": 1.0}, 250);
   }
  }, 500);
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div>
    <input style="margin-bottom:1em ;" data-id="Inventory1" id="searchTxtBox1" placeholder="Search..." class="form-control">
</div>
<h1>jQuery jSearch Plugin Demo</h1>
<ul class="list-group">
    <div class="select3-multiple-input-container" id="Inventory1">
        <li class="select3-multiple-selected-item item list-group-item list-group-item-success" data-searchBox="vegan pizza">vegan pizza</li>
        <li class="select3-multiple-selected-item item list-group-item list-group-item-info" data-searchBox="coke soda">coke soda</li>
        <li class="select3-multiple-selected-item item list-group-item list-group-item-warning" data-searchBox="cheese pizza">cheese pizza</li>
        <li class="select3-multiple-selected-item item list-group-item list-group-item-danger" data-searchBox="pepsi soda">pepsi soda</li>
        <li class="select3-multiple-selected-item item list-group-item list-group-item-success" data-searchBox="chocolate cake">chocolate cake</li>
        <li class="select3-multiple-selected-item item list-group-item list-group-item-info" data-searchBox="glaze donut">glaze donut</li>
        <li class="select3-multiple-selected-item item list-group-item list-group-item-warning" data-searchBox="cheese cake">cheese cake</li>
        <li class="select3-multiple-selected-item item list-group-item list-group-item-danger" data-searchBox="cream donut">cream donut</li>
    </div>
</ul>