Question

我尝试为所选选项创建搜索框（非常大的数据 - 大约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>

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

Answer 1

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

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

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

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

Answer 2

尝试使用jQuery中的search（）函数

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

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

2 个答案: