How to develop autocomplete textbox in AngularJS and MVC4. I'm new to AngularJS

Question

My Scenario: My MVC controller is returning JSON data which is array of string

I tried all the possible solutions like twitter bootstrap typeahed for angular but nothing

Answer 1

Finally I used Angular Material for the autocomplete and it works like a charm. Here are the steps to create autocomplete in Angularjs and MVC4

Step 1: Angular material has a dependency on
angular-animate.js
angular-aria.js
angular-messages.js

register these js files in your bundle config:

bundles.Add(new ScriptBundle("~/bundles/angularanimatejs").Include("~/Scripts/angular-animate.js"));
bundles.Add(new ScriptBundle("~/bundles/angularariajs").Include("~/Scripts/angular-aria.js"));
bundles.Add(new ScriptBundle("~/bundles/angularmessagesjs").Include("~/Scripts/angular-messages.js"));

Register two css files as well: bundles.Add(new StyleBundle("~/Content/angularmaterialcss").Include("~/Content/angular-material.css")); bundles.Add(new StyleBundle("~/Content/angularmateriallayoutcss").Include("~/Content/angular-material-layout.css"));

Now include these files in shared or your page:

@Styles.Render("~/Content/angularmaterialcss")
@Styles.Render("~/Content/angularmateriallayoutcss")
@Scripts.Render("~/bundles/cdnangularjs")
@Scripts.Render("~/bundles/cdnangularresourcejs")
@Scripts.Render("~/bundles/angularanimatejs")
@Scripts.Render("~/bundles/angularariajs")
@Scripts.Render("~/bundles/angularmessagesjs")
@Scripts.Render("~/bundles/angularmaterialjs")
@Scripts.Render("~/bundles/appjs")

Now in your cshtml page add html code:

    

        
Use md-autocomplete to search for matches from local or remote data sources.
        
            
                {{item.display}}
            
            
                No states matching "{{ctrl.searchText}}" were found.
                Create a new one!
            
        
        

        Simulate query for results?
        Disable caching of queries?
        Disable the input?

        
By default, md-autocomplete will cache results when performing a query.  After the initial call is performed, it will use the cached results to eliminate unnecessary server requests or lookup logic. This can be disabled above.
    

write below code into your app.js file:

(function ()
{
'use strict';
angular
.module('StockMarketApp', ['ngMaterial', 'ngMessages'])
.controller('DemoCtrl', DemoCtrl);

function DemoCtrl($timeout, $q, $log)
{
    var self = this;

    self.simulateQuery = false;
    self.isDisabled = false;
    // list of `state` value/display objects
    self.states = loadAll();
    self.querySearch = querySearch;
    self.selectedItemChange = selectedItemChange;
    self.searchTextChange = searchTextChange;

    self.newState = newState;

    function querySearch(query)
    {
        var results = query ? self.states.filter(createFilterFor(query)) : self.states,
        deferred;
        if (self.simulateQuery)
        {
            deferred = $q.defer();
            $timeout(function ()
            {
                deferred.resolve(results);
            }, Math.random() * 1000, false);
            return deferred.promise;
        } else
        {
            return results;
        }
    }

    function searchTextChange(text)
    {
        $log.info('Text changed to ' + text);
    }

    function selectedItemChange(item)
    {
        $log.info('Item changed to ' + JSON.stringify(item));
    }

    function loadAll()
    {
        var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
            Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
            Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
            Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
            North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
            South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
            Wisconsin, Wyoming';

        return allStates.split(/, +/g).map(function (state)
        {
            return 
            {
                value: state.toLowerCase(),
                display: state
            };
        });
    }

    function createFilterFor(query) 
    {
        var lowercaseQuery = angular.lowercase(query);
        return function filterFn(state) 
        {
            return (state.value.indexOf(lowercaseQuery) === 0);
        };
    }
}
})();

Angularjs Material Autocomplete demo's-Angular Material Autocomplete

Once you have a demo running autocomplete file then modify it according to your need.

For bootstrap type ahead another link-bootstrap typeahed