如何使用angularjs在建议下拉菜单中优化搜索框中的搜索

时间:2016-12-26 10:21:37

标签: javascript jquery angularjs

我有一个搜索框,用于搜索要添加到群组中的人员姓名。在该搜索框的ng-change事件中,我正在调用一种方法,在这种方法中,我正在使用一个休息服务,该服务返回一个非常大的长度为20000+的数组

$scope.items =[
               {'name': 'John'},
               {'name': 'Bob'},
               {'name': 'Galvin'},
               {'name': 'Julia'}.........];

   /* And the front end looks like this */

<div class="input-group input-group-sm search-control"> 
            <input style="height:40px" id="dropdownMenu1" type="text" data-toggle="dropdown" class="form-control dropdown-toggle" placeholder="Search Name" ng-model="query" ng-change="searchNames()"></input><span class="input-group-addon">
                <span class="glyphicon glyphicon-search"></span></span>
</div>

    <div class="dropdown dropdown-scroll">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" id="NameSearch" style="max-height200px; width:100%;top:0px;overflow-y: scroll; position:absolute; ">

    <li role="presentation" ng-repeat='item in items | filter:query'> <a href="#"> {{item.name}} </a>
    </li>
</ul>

现在让我们考虑用户在输入/搜索框中键入“j”的情况,然后下拉列表应该只包含其中包含“j”的名称。你可以看到我正在使用过滤器完成这项工作。

但问题是,它非常缓慢。所以我正在寻找可以快速搜索的解决方案。

由于

0 个答案:

没有答案