您好我正在构建一个使用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>
答案 0 :(得分:2)
等待字符输入之间的小时间延迟(介于0.4到0.6秒之间的效果很好)。当计时器到期时,然后执行查找。这似乎对用户没有锤击查找响应。
使用在keyup事件上重置的计时器。
答案 1 :(得分:1)
我最近这样做的方法是等到用户输入至少几个字符,然后我进行异步调用以检索匹配的记录。这样可以减少页面加载时的等待时间
我还在keyup事件中放了一个计时器,这样它就不会尝试解决每个按键
答案 2 :(得分:1)
这是一个很大的数据集。根据其他信息(地理位置,时间范围等)对数据集进行的任何预过滤都将非常有用。我们在一个地方使用邮政数据库(免费提供)使用邮政编码来限制哪些城市可供选择,城市和邮政编码限制哪些街道可供选择,城市和邮政编码以及街道限制哪些地址可供选择(例如,知道只有2070到3400主街可能匹配)。
您可以执行的任何数据预索引也会有所帮助。尽可能避免在交互时间内进行线性搜索。您可能希望将您的名单分成更小的块 - 按照Jasonscript建议的那些前几个字符划分为桶,以将问题简化为更易于管理的问题。
请记住,您不必一次完成所有比赛。您可以获取适合屏幕,显示它们的那些,继续获取其余的作为后台任务,如果新的搜索条件可用,该任务将被中断。正如其他人所指出的那样,这隐藏了用户的一些延迟。 (许多网站都做这样的事情;例如,BoingBoing最初只获取有限数量的条目,然后当你向下滚动到足以让它认为你需要它们时会抓取更多。)
确保您的数据最新且干净,如果客户而不是您自己的员工可以看到这些数据。你想要的最后一件事就是让他们滚动浏览“Farley,Charles Hugh”或类似的测试条目。
玩得开心。当你做对了,它真的给用户留下了深刻的印象。