Angular dropdown with autocomplete

Question

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 · Accepted Answer · 2020-06-25 07:46:46Z

6

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.

edited Jun 25, 2020 at 7:46

answered Jul 5, 2016 at 15:04

developer033

25k8 gold badges85 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

biko Over a year ago

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!

VjyV · Accepted Answer · 2016-07-05 13:18:24Z

2

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

answered Jul 5, 2016 at 13:18

VjyV

3342 silver badges14 bronze badges

1 Comment

developer033 Over a year ago

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

Collectives™ on Stack Overflow

Angular dropdown with autocomplete

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related