Angular dropdown with autocomplete

angularjs autocomplete

34,156

Solution 1

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.

Solution 2

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

34,156

Author by

N.A

SailsJS,AngularJS

Updated on July 09, 2022

Comments

N.A almost 2 years
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.
developer033 almost 8 years

He's asking a way to do this with the module that he's using.
biko almost 6 years

Thanks for this. I have a couple questions. 1) When an exact match is typed and the input loses focus using the tab key, the selected object seems to be correct and matches the object. However when the input loses when a submit button e.g. is clicked, the selected object isn't successfully set after an exact match. 2) It is possible to manually set the ng-model of the directive? How can I access the searchStr ng-model? Thanks in advance!