jquery indexOf 非常慢..还有其他替代解决方案吗？答案

【问题标题】：jquery indexOf very slow ..any other alternate solution?jquery indexOf 非常慢..还有其他替代解决方案吗？
【发布时间】：2016-01-04 09:34:32
【问题描述】：

我尝试为所选选项创建搜索框（非常大的数据 - 大约 2000 个选项）

indexOf 方法非常慢..还有其他解决方案吗？

jQuery 代码：

$('#textfortitlesearch').on('keyup', function() {

     var query = this.value.toLowerCase();

$('[id^="checkboxtitlelist"]').each(function(i, elem) {

      var datavalue=$(this).attr("data-id");
      if(datavalue.toLowerCase().indexOf(query) != -1)
      {
         $(this).parent('div').show(); 
      }
      else  
      {
         $(this).closest('div').hide();
      }
}); 
});

HTML 代码：

<input type="text" class="form-control" name="q1" id="textfortitlesearch" placeholder="Search and Select Expert Title">

 <div style="overflow:auto;max-height:100px;margin-top:10px;">
  <div class="exptspw" title="Electronic Enginnering Expert">
  <input type="checkbox" name="expTitle[]" id="checkboxtitlelist1" value="1" data-id="Electronic Enginnering Expert">  Electronic Enginnering Expert
  </div>


   <div class="exptspw" title="African Grey Parrots Expert">
   <input type="checkbox" name="expTitle[]" id="checkboxtitlelist2" value="2" data-id="African Grey Parrots Expert">  African Grey Parrots Expert
  </div>


  <div class="exptspw" title="Alpacas Expert">
  <input type="checkbox" name="expTitle[]" id="checkboxtitlelist3" value="3" data-id="Alpacas Expert">  Alpacas Expert
  </div>
    ......

   <div class="exptspw" title="Sales Expert">
   <input type="checkbox" name="expTitle[]" id="checkboxtitlelist2431" value="2431" data-id="Sales Expert">  Sales Expert
   </div>


  <div class="exptspw" title="Insurance Advisor">
  <input type="checkbox" name="expTitle[]" id="checkboxtitlelist2433" value="2433" data-id="Insurance Advisor">  Insurance Advisor
  </div>


   <div class="exptspw" title="English Language Expert">
   <input type="checkbox" name="expTitle[]" id="checkboxtitlelist2434" value="2434" data-id="English Language Expert">  English Language Expert
  </div>
</div>

我认为搜索过程很慢......还有其他搜索数据的方法吗？

【问题讨论】：

你可以试试$('[id^="checkboxtitlelist"]') .closest('div') .hide() .filter('[data-id*=' + query + ']') .closest('div') .show()
@Satpal 相同的结果..非常慢..从大约 2000 个数据中搜索
你请求 DOM 做一些操作 2000 次，这是让它变慢的原因，而不是 indexOf() 方法

标签： jquery html indexof

【解决方案1】：

.indexOf 可以在当前浏览器上每秒执行数百万次检查。可能是代码的其他部分变慢了。

假设 HTML 表格在每个页面浏览中呈现一次，您可以在一开始就遍历整个 HTML 表格，并使用需要显示或隐藏的 datavalue.toLowerCase() 和 div 构建一个查找表。不仅仅是遍历那个查找表而不是 DOM。

这样您就不必每次都执行 $(this).attr("data-id") 和 $(this).closest('div') 操作，我认为这可能是它们在 DOM 上操作缓慢的原因。

我敢打赌，问题在于每次搜索都执行 .closest() 和 .parent() 调用 2000x。您可以通过搜索 div title 属性而不是 data-id 来省略这些；这样你就已经有了想要隐藏或显示的元素。

【讨论】：

由于 DOM 导致速度慢的任何解决方案？
在我的回答中用 javascript 创建一个查找表将使用 DOM 的整体要少得多。如果你少使用 DOM，你会受到它的缓慢性能的影响。
另外$('[id^="checkboxtitlelist"]') 可能会更快。尝试给容器 <div> 一个 ID（即“容器”）。然后你可以使用$('#container input')，这可能也快一点。
@user3691469 至少您可以将选择器更改为$('input[id^="checkboxtitlelist"]')，使其仅检查输入而不是页面上的每个元素。

【解决方案2】：

试试 jQuery 中的 search() 函数

if(datavalue.toLowerCase().search(query) != -1)
      {
         $(this).parent('div').show(); 
      }
      else  
      {
         $(this).closest('div').hide();
      }

【讨论】：

..同样的结果..非常慢:(
我认为在 DOM 中搜索大约 2000 条记录中的文本，然后只会很慢。您以 DB 或静态 JSON 格式存储记录，然后使用 ajax 响应 JSON 并将复选框格式 html 附加到该特定 HTML DIV 中。