CODEWITHSUNDEEP
javascriptjqueryangularjssearchautocomplete
Ajeet Lakhani
Ajeet Lakhani

Reputation: 3848

customise autocomplete in angularjs

i was trying to make a custom search. I got this http://jsfiddle.net/ajeet28/wzx13Lu1/ for autocomplete in angularjs. how can i customise it so that it can start matching from first character itself

html

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

js

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);
                }
            });
    };
});

Upvotes: 1

Views: 1416

Answers (2)

Maxim Paliy
Maxim Paliy

Reputation: 386

You can use function instead of array as source parameter. Something like this:

                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

Upvotes: 1

Sudarshan Kalebere
Sudarshan Kalebere

Reputation: 3929

Well in that case please check this demo , I hope this solves your custum search, You need to write regular expression. please go through the demo.

My 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]);
    };  

});

My 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="[email protected]" 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>

Upvotes: 1

Related Questions