文章/答案/技术大牛

发布

社区首页 >问答首页 >..any indexOf非常慢的jquery其他替代解决方案？

问..any indexOf非常慢的jquery其他替代解决方案？
EN

Stack Overflow用户

提问于 2016-01-04 17:34:32

回答 2查看 128关注 0票数 0

我尝试为选定的选项创建搜索框(非常大的数据-大约2000个选项)

indexOf方法很慢的..any其他解决方案吗？

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>

我认为搜索过程非常慢，....any其他方式来搜索数据？

jquery

html

indexof

回答 2

Stack Overflow用户

发布于 2016-01-04 18:02:46

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

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

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

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

票数 3

Stack Overflow用户

发布于 2016-01-04 17:52:56

尝试使用jQuery中的search()函数

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34588139

复制

相似问题

问..any indexOf非常慢的jquery其他替代解决方案？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问..any indexOf非常慢的jquery其他替代解决方案？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问..any indexOf非常慢的jquery其他替代解决方案？
EN