Angular Material : Custom Autocomplete directive

Standard

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:

<search-combo data="vm.dataList" filtersearch="vm.showSelectedItem"></search-combo>

Autocomplete Directive:

(function () {
    'use strict';

    angular
        .module('app')
        .directive('searchCombo', searchCombo);

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

        return directive;
    }

    autoCompleteController.$inject = [];

    function autoCompleteController() {

        var vm = this;

        init();

        /////////////////////Implementation///////////////////////////////

        function init() {
            vm.datalist = vm.data; 
            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)
                vm.filterSearch()(vm.selectedItem);
            else
                vm.filterSearch()("");
        }

    }

})();

Loader Directive Html:

<md-autocomplete ng-disabled="vm.config.disabled "
                 md-no-cache="vm.config.noCache"
                 md-selected-item="vm.selectedItem"
                 md-search-text-change="vm.searchTextChange(vm.searchText)"
                 md-search-text="vm.searchText"
                 md-selected-item-change="vm.selectedItemChange(item)"
                 md-items="item in vm.querySearch(vm.searchText)"
                 md-item-text="item.text" md-min-length="0"
                 placeholder="Search item here">
    <md-item-template>
        <span> {{item.text}} </span>
    </md-item-template>
    <md-not-found>
        No record matching "{{vm.searchText}}" were found.
    </md-not-found>
</md-autocomplete>

Output:

Captursse

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s