Angular Material Autocomplete input textbox – md-autocomplete example

Angular Material Autocomplete input textbox – md-autocomplete example

In this Post We Will Explain About is Angular Material Autocomplete input textbox – md-autocomplete example With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to md-autocompleteExample

In this post we will show you Best way to implement angular2 material autocomplete template Example, hear for angular-material-autocomplete-listwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Angular Material Dependencies

<script src="angular.min.js"></script>
<script src="angular-animate.min.js"></script>
<script src="angular-aria.min.js"></script>
<script src="angular-messages.min.js"></script>
<script src="angular-material.min.js"></script>

index.html

<div ng-app="liveAutocompleteApp">
    <div ng-controller="liveCtrl as liveapp">
        <md-content class="md-padding">
            <strong>To reproduce:</strong>
            <ul>
                <li>Type "Live24u.com" into the search box</li>
                <li>Before the list is populated with "Live24u.com", "No matches found" will briefly simple flash</li>
            </ul>
        </md-content>

        <md-toolbar class="md-padding">
            <md-autocomplete md-selected-item="selectedItem" md-search-text="liveText" md-items="item in liveapp.getMatches(liveText)" md-item-text="item.lan_name" placeholder="Search language" md-no-cache="true">
                <md-item-template>
                    <span>{{item.langcode}} - </span>
                    <span md-highlight-text="liveText" md-highlight-flags="^i">{{item.lan_name}}</span>
                </md-item-template>
                <md-not-found>
                    No ANY matches found BY Live24u.com Autocomplete BOX
                </md-not-found>
            </md-autocomplete>
        </md-toolbar>
    </div>
</div>




Also Read :   Create Simple Digital Clock in AngularJS Directive

scripts(index.js)

angular
    .module('liveAutocompleteApp', ['ngMaterial'])
    .controller('liveCtrl', function($scope, $q, $timeout) {
        this.getMatches = function(liveText) {
            var deferred = $q.defer();

            $timeout(function() {
                var language = getlangname().filter(function(state) {
                    return (state.lan_name.toUpperCase().indexOf(liveText.toUpperCase()) !== -1 || state.langcode.toUpperCase().indexOf(liveText.toUpperCase()) !== -1);
                });
                deferred.resolve(language);
            }, 1500);

            return deferred.promise;
        }
    });


function getlangname() {
    return [{
        "lan_name": "Laravel",
        "langcode": "AL"
    }, {
        "lan_name": "PHP",
        "langcode": "AK"
    }, {
        "lan_name": "Vuejs Samoa",
        "langcode": "AS"
    }, {
        "lan_name": "codignator",
        "langcode": "AZ"
    }, {
        "lan_name": "Magento",
        "langcode": "AR"
    }, {
        "lan_name": "mysql",
        "langcode": "CA"
    }, {
        "lan_name": "mysqli",
        "langcode": "CO"
    }, {
        "lan_name": "javascript",
        "langcode": "CT"
    }, {
        "lan_name": "jquery",
        "langcode": "DE"
    }, {
        "lan_name": "Asp.net",
        "langcode": "DC"
    }, {
        "lan_name": "laravel API",
        "langcode": "FM"
    }, {
        "lan_name": "wordpress",
        "langcode": "FL"
    }, {
        "lan_name": "HTML",
        "langcode": "GA"
    }, {
        "lan_name": "CSS",
        "langcode": "GU"
    }, {
        "lan_name": "gujrati",
        "langcode": "HI"
    }, {
        "lan_name": "hindi",
        "langcode": "ID"
    }, {
        "lan_name": "mathematics",
        "langcode": "IL"
    }, {
        "lan_name": "science",
        "langcode": "IN"
    }, {
        "lan_name": "yii",
        "langcode": "IA"
    }, {
        "lan_name": "rectjs",
        "langcode": "KS"
    }, {
        "lan_name": "meanjs",
        "langcode": "KY"
    }, {
        "lan_name": "examples",
        "langcode": "LA"
    }, {
        "lan_name": "math",
        "langcode": "ME"
    }, {
        "lan_name": "sunscrit",
        "langcode": "MH"
    }, {
        "lan_name": "malae",
        "langcode": "MD"
    }, {
        "lan_name": "india",
        "langcode": "MA"
    }, {
        "lan_name": "data",
        "langcode": "MI"
    }, {
        "lan_name": "laraphp",
        "langcode": "MN"
    }, {
        "lan_name": "okkkkkk",
        "langcode": "MS"
    }, {
        "lan_name": "simple examples",
        "langcode": "MO"
    }, {
        "lan_name": "free languages",
        "langcode": "MT"
    }, {
        "lan_name": "examples",
        "langcode": "NE"
    }, {
        "lan_name": "free download",
        "langcode": "NV"
    }, {
        "lan_name": "live24 free",
        "langcode": "NH"
    }, {
        "lan_name": "live24 download",
        "langcode": "NJ"
    }, {
        "lan_name": "live24 https",
        "langcode": "NM"
    }, {
        "lan_name": "live24 ssl",
        "langcode": "NY"
    }, {
        "lan_name": "latest simple",
        "langcode": "NC"
    }, {
        "lan_name": "javaa Dakota",
        "langcode": "ND"
    }, {
        "lan_name": "mpds mbbs Islands",
        "langcode": "MP"
    }, {
        "lan_name": "LMW",
        "langcode": "OH"
    }, {
        "lan_name": "HKG",
        "langcode": "OK"
    }, {
        "lan_name": "BED",
        "langcode": "OR"
    }, {
        "lan_name": "MCA",
        "langcode": "PW"
    }, {
        "lan_name": "BA",
        "langcode": "PA"
    }, {
        "lan_name": "Account",
        "langcode": "PR"
    }, {
        "lan_name": "sp",
        "langcode": "RI"
    }, {
        "lan_name": "laravel++",
        "langcode": "SC"
    }, {
        "lan_name": "c++",
        "langcode": "SD"
    }, {
        "lan_name": "c",
        "langcode": "TN"
    }, {
        "lan_name": "css",
        "langcode": "TX"
    }, {
        "lan_name": "java",
        "langcode": "UT"
    }, {
        "lan_name": "facebook",
        "langcode": "VT"
    }, {
        "lan_name": "skype",
        "langcode": "VI"
    }, {
        "lan_name": "filezilla",
        "langcode": "VA"
    }, {
        "lan_name": "lampp",
        "langcode": "WA"
    }, {
        "lan_name": "wamapp",
        "langcode": "WV"
    }, {
        "lan_name": "xampp",
        "langcode": "WI"
    }, {
        "lan_name": "notepad",
        "langcode": "WY"
    }];
}

Include Css

html,
body {
    background: #DBEAF9;
}




Also Read :   HTML Upload Images in TinyMCE Editor using PHP

Example

I hope you have Got What is AngularJS Material Design Autocomplete Examples And how it works.I would Like to have FeadBack From My Blog(live24u.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(live24u.com) Are Most Always Welcome.

   

Add a Comment

Your email address will not be published.