在angularjs中自定义自动完成答案

【问题标题】：customise autocomplete in angularjs在angularjs中自定义自动完成
【发布时间】：2015-02-09 13:37:17
【问题描述】：

我正在尝试进行自定义搜索。我在angularjs中为autocomplete得到了这个http://jsfiddle.net/ajeet28/wzx13Lu1/。我如何自定义它以便它可以从第一个字符本身开始匹配

html

<div ng-app='MyModule'>
    <div ng-controller='DefaultCtrl'>
        <input auto-complete ui-items="names" ng-model="selected">
        selected = {{selected}}
    </div>
</div>

function DefaultCtrl($scope) {
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
}

angular.module('MyModule', []).directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    };
});

【问题讨论】：

第一个字符是什么意思，它已经可以正常工作了？你想匹配特定的字符串，也就是说，如果我输入 b，那么应该显示以 b 开头的字符串？？
在搜索框中输入一个你会得到查理作为第一个结果。在我想要的情况下，如果我输入 a 它应该只显示以'a'开头的结果。

标签： javascript jquery angularjs search autocomplete

【解决方案1】：

您可以使用函数而不是数组作为源参数。像这样的：

                source: function(request, response) {
                var res = new Array()
                for (var i=0; i<scope[iAttrs.uiItems].length; i++) {
                    if (scope[iAttrs.uiItems][i].indexOf(request.term) == 0) {
                           res.push(scope[iAttrs.uiItems][i]);
                    }
                }
                response(res);
            }

jsfiddle

【讨论】：

【解决方案2】：

那么在这种情况下请检查demo，我希望这可以解决您的自定义搜索问题，您需要编写正则表达式。请通过演示。

我的 app.js

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
function escRegExp(string){
    return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
   $scope.randomArray = [
     'SBI',
     'BSI',
     'isb',
     'bsisib',
     'be happy',
     'dont worry',
     'hello',
     'charlie',
     'john',
     'robert', 
     'alban',
     'oscar', 
     'marie', 
     'celine', 
     'rebecca',
     'michel',
     'francis',
     'jean',
     'paul',
     'pierre',
     'nicolas',
     'alfred',
     'gerard',
     'brad',
     'louis'];

    $scope.filterSearch = function(name) {
        if (!$scope.search) return true;
        var regex = new RegExp('\\b' + escRegExp($scope.search), 'i');
        return regex.test(name.split(' ')[0]);
    };  

});

我的 app.hmtl

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
  <input type="search" ng-model="search"> 
         <ul>
            <li ng-repeat="name in randomArray | filter:filterSearch">
                {{ name }}
            </li>
        </ul>
  </body>

</html>

【讨论】：