Angular Material : Custom Autocomplete directive


Customize Angular autocomplete directive, register within your controller and other data services and use it throughout your project. I have consolidated it through directive in-order to overcome boilerplate code in multiple module controllers. Different controller can utilize this directive by passing list through data attribute and passing caller controller method to invoke on selected item through filter-search attribute. For html code clone my repo from github.

Github Link

Angular Code:

(function () {
    'use strict';

    var app = angular.module('app', ['ngMaterial']);

    app.controller('autocompleteController', function () {
        var vm = this;

        vm.selectedItem = "";

        vm.dataList = [{ text: 'ABC', value: 1 },
                        { text: 'XYZ', value: 2 },
                        { text: 'Foo', value: 3 },
                        { text: 'Bar', value: 4 }];

        vm.showSelectedItem = function (valueReturnByDirective) {
            vm.selectedItem = valueReturnByDirective;



Angular HTML Code:

Autocomplete Directive:

(function () {
    'use strict';

        .directive('searchCombo', searchCombo);

    function searchCombo() {
        var directive = {
            restrict: 'EA',
            templateUrl: '/scripts/app/autoSearchDirective.html',
            scope: {
                data: '=',
                filtersearch: '&'
            controller: directiveController,
            controllerAs: 'vm',
            bindToController: true

        return directive;

    directiveController.$inject = [];

    function directiveController() {

        var vm = this;



        function init() {
            vm.datalist =; 
            vm.filterSearch = vm.filtersearch;

            vm.config = {};
            vm.config.disabled = false;
            vm.config.noCache = false;
            vm.searchText = "";
            vm.selectedItem = "";
            vm.selectedItemChange = selectedItemChange;
            vm.searchTextChange = searchTextChange;
            vm.querySearch = querySearch;


        function querySearch(query) {
            var results = query ? vm.datalist.filter(createFilterFor(query)) : vm.datalist;
            return results;

        function createFilterFor(query) {
            var lowercaseQuery = angular.lowercase(query);

            return function filterFn(data) {
                return (angular.lowercase(data.text).indexOf(lowercaseQuery) === 0);


        function searchTextChange(text) {
            console.log('Text changed to ' + text);

        function selectedItemChange(item) {
            if (item)



Loader Directive Html:

        No record matching "{{vm.searchText}}" were found.




2 thoughts on “Angular Material : Custom Autocomplete directive

  1. sfslouisville

    Thanks for this! I’m a bit confused, though. It seems that you have 2 controllers with the same name. The first is defined on the app, and the second is defined within the directive. How is the directive able to access the outer controller? Also, I think things would be clearer if the two controllers didn’t share the same name and controllerAs alias. It makes it difficult to understand what is happening.


    • Hey, Thanks for pointing this out, I have renamed directive controller, secondly, caller controller is passing values to the directive as scope attribute defined in the directive definition:
      scope: { data: ‘=’, filtersearch: ‘&’ }


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s