Typeahead Dropdown In AngularJS

            In this article, I would like to know you about using typeahead dropdown in angularjs application, typeahead is like a autocomplete text dropdown provided by twitter.

For this we have to install angular-typeahead from nuget package manager.

For this I had taken three dropdowns, one is for one is autocomplete without heading and another one is autocomplete with heading and other one is anutocomple with heading by getting data from webapi.

So, I had taken two projects in one solution, one is for angularjs-typeahead application and another one is for WebApi, to get the data from the Api.

The code is as follows :

index.html

    
 
    
    

    
    
    
    
    
    
    

    



    

        

            


                
                


AngularJS - Typeahead Sample
(Typeahead Is Like Autocomplete Text)

                     Typeahead Autocomplete Without Heading
                    

                        Filter via Typeahead: 
                    

                            
                         

                        
                     


                     Typeahead Autocomplete With Heading
                    

                        Filter via Typeahead: 
                    

                        
                    

                        
                    


                     Typeahead Autocomplete With Heading, Getting Data From WebApi
                    

                        Filter via Typeahead: 
                    

                        
                    

                        
                    


                       


                               

Item Information

                           

                           
Item Id :
{{ItemsModel.ItemId}}
                           

                               
Item Category :
                               
{{ItemsModel.ItemCategory}}
                           

                               
Item Code :
                               
{{ItemsModel.ItemCode}}
                           

                               
Item Name :
                               
{{ItemsModel.ItemName}}
                           

                               
Item Price :
                               
{{ItemsModel.ItemPrice}}
                           

And js file as :

Index.js

var myApp = angular.module("AngularTypeaheadApplication", ['siyfion.sfTypeahead']);

// define factory for data source
myApp.factory("ItemDetails", function () {
  
    var itemdetails = [
        {
            ItemId: 1,
            ItemCategory: "Computer",
            ItemCode: "KB384",
            ItemName: "KeyBoard",
            ItemPrice: "600",
        },
    {
        ItemId: 2,
        ItemCategory: "Computer",
        ItemCode: "MU932",
        ItemName: "Mouse",
        ItemPrice: "500",
    },
    {
        ItemId: 3,
        ItemCategory: "Computer",
        ItemCode: "PD843",
        ItemName: "Pen Drive",
        ItemPrice: "600",
    },
    {
        ItemId: 4,
        ItemCategory: "Computer",
        ItemCode: "DV0495",
        ItemName: "DVD Drive",
        ItemPrice: "2000",
    },
       {
           ItemId: 5,
           ItemCategory: "Electricity",
           ItemCode: "EL384",
           ItemName: "Socket",
           ItemPrice: "500",
       },
    {
        ItemId: 6,
        ItemCategory: "Electricity",
        ItemCode: "EF332",
        ItemName: "FAN",
        ItemPrice: "800",
    },
    {
        ItemId: 7,
        ItemCategory: "Electricity",
        ItemCode: "EC843",
        ItemName: "Cooler",
        ItemPrice: "2400",
    },
    {
        ItemId: 8,
        ItemCategory: "Electricity",
        ItemCode: "EPG0495",
        ItemName: "Plugs",
        ItemPrice: "1000",
    },
    {
        ItemId: 9,
        ItemCategory: "Electricity",
        ItemCode: "ECW074",
        ItemName: "Copper Wires",
        ItemPrice: "600",
    },
     {
         ItemId: 10,
         ItemCategory: "Computer",
         ItemCode: "ECW074",
         ItemName: "C P U",
         ItemPrice: "6000",
     },
      {
          ItemId: 11,
          ItemCategory: "Electricity",
          ItemCode: "EL743",
          ItemName: "MIC",
          ItemPrice: "500",
      },
        {
            ItemId: 11,
            ItemCategory: "Computer",
            ItemCode: "EC754",
            ItemName: "Moniter",
            ItemPrice: "7000",
        },
    ]

    return itemdetails;

});

// setup controller and pass data source
myApp.controller("TypeaheadController", function ($scope, ItemDetails, $filter) {

    $scope.ItemsModel = undefined;
    $scope.ItemDataset1 = [];
    $scope.ItemDataset2 = [];
    $scope.ItemDataset3 = [];
   
    $scope.Items = ItemDetails;
    $scope.ItemCategory = [{ ItemCategory: 'Computer' }, { ItemCategory: 'Electricity' }]

    /// Method 1
    var bd = new Bloodhound({
        datumTokenizer: function (d) {
            return Bloodhound.tokenizers.whitespace(d.ItemName);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: $scope.Items
    });
    bd.initialize();
    $scope.ItemDataset1.push({
        Name: 'ItemName',
        source: bd.ttAdapter(),
        display: 'ItemName',
        templates: {
            empty: [
              '

',
                'No Item Found',
              '
'
            ].join('\n'),
            //  header: '

{{ItemCode}}
',
            suggestion: Handlebars.compile('

{{ItemName}} - {{ItemCode}}
')
        }
    });

    //Method 2 (Showing Header)
    $scope.ItemCategory.forEach(function (item) {
        var bh = new Bloodhound({
            datumTokenizer: function (d) {
                return Bloodhound.tokenizers.whitespace(d.ItemName);
            },
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            // prefetch: prefetch requires url to be set
            //local :
            local: $filter('filter')($scope.Items, { ItemCategory: item.ItemCategory })
        });
        bh.initialize();
        $scope.ItemDataset2.push({
            Name: 'ItemName',
            source: bh.ttAdapter(),
            display: 'ItemName',
            templates: {
                //empty: [
                //  '

',
                //    'No Item Found',
                //  '
'
                //].join('\n'),
                header: '

' + item.ItemCategory + '
',
                suggestion: Handlebars.compile('

{{ItemName}} - {{ItemCode}}
')
            }
        });
    });
    
    $scope.shwData = false;
    $scope.btnSearch = function () {
        $scope.shwData = true;
    }

    var InIt = function () {
       
        $scope.ItemCategory.forEach(function (item) {
            // instantiate the bloodhound suggestion engine
            var bw = new Bloodhound({
                datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.ItemName); },
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                prefetch: 'http://localhost:54897/api/Items/ItemInfo?Category=' + item.ItemCategory
            });
            bw.initialize();

            $scope.ItemDataset3.push(
                //{
                //    hint: true,
                //    highlight: true,
                //    minLength: 1
                //},
                {
                Name: 'ItemName',
                source: bw.ttAdapter(),
                display: 'ItemName',
                templates: {
                    //empty: [
                    //  '

',
                    //    'No Item Found',
                    //  '
'
                    //].join('\n'),
                    header: '

' + item.ItemCategory + '
',
                    suggestion: Handlebars.compile('

{{ItemName}} - {{ItemCode}}
')
                }
            });
        });
        }
    InIt();
});

And In WebApi Project:

And add a class named ItemDetails

public class ItemDetails
    {

        public int ItemId { get; set; }
        public string ItemCategory { get; set; }
        public string ItemCode { get; set; }
        public string ItemName { get; set; }
        public string ItemPrice { get; set; }
    }

Add a model class named ItemsDataList to bind data to the class add the below code :

public class ItemsDataList
    {
        //  To get data from list
        public List ItemList
        {
            get { return itemList; }
        }

        //  Binding data to List i.e., set data to list
        List itemList = new List()
        {
           new ItemDetails(){
            ItemId= 1,
            ItemCategory= "Computer",
            ItemCode= "KB384",
            ItemName= "KeyBoard",
            ItemPrice= "600",
        },
     new ItemDetails(){
        ItemId= 2,
        ItemCategory= "Computer",
        ItemCode= "MU932",
        ItemName= "Mouse",
        ItemPrice= "500",
    },
    new ItemDetails() {
        ItemId= 3,
        ItemCategory= "Computer",
        ItemCode= "PD843",
        ItemName= "Pen Drive",
        ItemPrice= "600",
    },
     new ItemDetails(){
        ItemId= 4,
        ItemCategory= "Computer",
        ItemCode= "DV0495",
        ItemName= "DVD Drive",
        ItemPrice= "2000",
    },
      new ItemDetails()  {
           ItemId= 5,
           ItemCategory= "Electricity",
           ItemCode= "EL384",
           ItemName= "Socket",
           ItemPrice= "500",
       },
     new ItemDetails(){
        ItemId= 6,
        ItemCategory= "Electricity",
        ItemCode= "EF332",
        ItemName= "FAN",
        ItemPrice= "800",
    },
    new ItemDetails() {
        ItemId= 7,
        ItemCategory= "Electricity",
        ItemCode= "EC843",
        ItemName= "Cooler",
        ItemPrice= "2400",
    },
    new ItemDetails() {
        ItemId= 8,
        ItemCategory= "Electricity",
        ItemCode= "EPG0495",
        ItemName= "Plugs",
        ItemPrice= "1000",
    },
    new ItemDetails() {
        ItemId= 9,
        ItemCategory= "Electricity",
        ItemCode= "ECW074",
        ItemName= "Copper Wires",
        ItemPrice= "600",
    },
      new ItemDetails(){
         ItemId= 10,
         ItemCategory= "Computer",
         ItemCode= "ECW074",
         ItemName= "C P U",
         ItemPrice= "6000",
     }

    };


    }

Now take a controller named ItemsController and add the below code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApi_TypeaheadSample.Models;

namespace WebApi_TypeaheadSample.Controllers
{
    public class ItemsController : ApiController
    {
        [Route("Api/Items/ItemInfo")]
        [HttpGet]
        public IHttpActionResult ItemInfo(string Category)
        {
            ItemsDataList itemsDL=new ItemsDataList();
            
            var itemList = itemsDL.ItemList.Where(x => x.ItemCategory == Category);
                
            return Ok(itemList);
        }
    }
}

Output :

After run the application, the output will be as follows:

When enter some text in the first dropdown, the autocomplete text shows as below:

When enter some text in the second dropdown, the autocomplete text with heading will be shown as below :

When enter some text in the third dropdown, the autocomplete text will be shown with heading by getting data from the WebApi :