CODEWITHSUNDEEP
angularjsautocomplete
N.A
N.A

Reputation: 855

Angular dropdown with autocomplete

I am using bootstrap with Angularjs.I have many drop down menus in my page and want to implement the functionality as there should be a textbox which on focus shows data in array and on typing shows autocomplete functionality.

I have tried 2 approaches with autocomplete but they just show data on typing.when we type nothing data in drop down isn't showing. like This Directive 

<angucomplete id="ex1" placeholder="Select Nationality" selectedobject="std.NATIONALITY_ID" localdata="nationalities"    searchfields="description" titlefield="description" minlength="1"   inputclass="form-control form-control-small"/>
    </div>

This is showing data on typing only i want a list on focus and autocomplete on typing.Kindly suggest an approach or angular or bootstrap for this.

Upvotes: 2

Views: 36005

Answers (2)

developer033
developer033

Reputation: 24874

First of all, you should have read what they said about their module on their github:

NOTE: I no longer actively mantain this repository. I've started using ReactJS now and its a breath of fresh air compared to AngularJS. If you're still using Angular and need a autocomplete component I'd encourage you to look at this fork of my original Angucomplete: angucomplete-alt

To use the new module you just have to do some modifications that I've already made and it seems to work as you expected.

Snippet:

var app = angular.module('app', ['angucomplete-alt']);

app.controller('mainCtrl', function($scope) {
  $scope.selectedObj = {};
  $scope.nationalities = [  
     {
        "NATIONALITY_ID": 1,
        "description":"Afghan"
     },
     {  
        "NATIONALITY_ID": 2,
        "description":"Andorran"
     },
     {  
        "NATIONALITY_ID": 3,
        "description":"Botswanan"
     },
     {  
        "NATIONALITY_ID": 4,
        "description":"Brazilian"
     },
     {  
        "NATIONALITY_ID": 5,
        "description":"Canadian"
     },
     {
        "NATIONALITY_ID": 6,
        "description":"Cypriot"
     }
  ];
});
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angucomplete-alt/2.4.1/angucomplete-alt.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <angucomplete-alt id="ex1"
    placeholder="Select Nationality"
    selected-object="selectedObj"
    local-data="nationalities"
    search-fields="description"
    title-field="description"
    minlength="1"
    inputclass="form-control form-control-small"
    match-class="highlight" />
</body>

</html>

You can check more examples here.

Upvotes: 6

VjyV
VjyV

Reputation: 334

I hope this link help you for Autocomplete dropdown : http://embed.plnkr.co/jBJkDb But it's using ui-select please note that.

Upvotes: 2

Related Questions