自动建议20,000条目

时间:2014-01-17 01:02:41

标签: javascript performance angularjs angularjs-scope angularjs-ng-repeat

您好我正在构建一个使用autosuggest的表单。它的工作方式是我将大约20,000多名客户加载到我的angularjs应用程序中。然后,当用户在输入字段中键入要查找的客户的名称时,我只显示与用户输入的客户匹配的客户。每次用户键入字符时,查找$ scope.search1_autosuggest()的函数运行试。

我想知道我这样做的方式是否有效?由于它是一组大量数据,我想确保速度足够快以进行自我提示。

controller.js

 $scope.search1_autosuggest=function(type){
      var results=$scope.original_data;
      var new_results=[];
   if(type=="phone"){

     var typed_result=$scope.search1.phone;

      for (var key in results) {
          var phone_result = results[key].home_phone;

          if(phone_result.match(typed_result)){
              new_results.push(results[key]);
          }
      }
      $scope.info=new_results;


   }

};

partial.html

 <form>
    Phone: <input type="text" data-ng-model="search1.phone" data-ng-
 change="search1_autosuggest('phone')"/><br/>
    Name: <input type="text" data-ng-model="search1.name" data-ng-    
 change="search1_autosuggest('name')"/><br/>
    Address: <input type="text" data-ng-model="search1.address" data-ng-  
 change="search1_autosuggest('address')"/><br/>
</form>
<h3>Customers</h3>
<div>
    <ul>
        <li data-ng-repeat="field in info">
            <a href="" data-ng-click="retrieve_single(field.id)"> name:{{field.name}}.     
  address:{{field.address}}.    Phone:{{field.home_phone}}.</a>
        </li>
    </ul>
  </div>

3 个答案:

答案 0 :(得分:2)

等待字符输入之间的小时间延迟(介于0.4到0.6秒之间的效果很好)。当计时器到期时,然后执行查找。这似乎对用户没有锤击查找响应。

使用在keyup事件上重置的计时器。

答案 1 :(得分:1)

我最近这样做的方法是等到用户输入至少几个字符,然后我进行异步调用以检索匹配的记录。这样可以减少页面加载时的等待时间

我还在keyup事件中放了一个计时器,这样它就不会尝试解决每个按键

答案 2 :(得分:1)

这是一个很大的数据集。根据其他信息(地理位置,时间范围等)对数据集进行的任何预过滤都将非常有用。我们在一个地方使用邮政数据库(免费提供)使用邮政编码来限制哪些城市可供选择,城市和邮政编码限制哪些街道可供选择,城市和邮政编码以及街道限制哪些地址可供选择(例如,知道只有2070到3400主街可能匹配)。

您可以执行的任何数据预索引也会有所帮助。尽可能避免在交互时间内进行线性搜索。您可能希望将您的名单分成更小的块 - 按照Jasonscript建议的那些前几个字符划分为桶,以将问题简化为更易于管理的问题。

请记住,您不必一次完成所有比赛。您可以获取适合屏幕,显示它们的那些,继续获取其余的作为后台任务,如果新的搜索条件可用,该任务将被中断。正如其他人所指出的那样,这隐藏了用户的一些延迟。 (许多网站都做这样的事情;例如,BoingBoing最初只获取有限数量的条目,然后当你向下滚动到足以让它认为你需要它们时会抓取更多。)

确保您的数据最新且干净,如果客户而不是您自己的员工可以看到这些数据。你想要的最后一件事就是让他们滚动浏览“Farley,Charles Hugh”或类似的测试条目。

玩得开心。当你做对了,它真的给用户留下了深刻的印象。