Angularjs typeahead example is always not working

Question

I am trying to use a case on angularjs typeahead now, but it is always not working, am I forget to import some js files? please help me out, thank you

Html:

 <!doctype html>
<html ng-app="search">

<head>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="ui-bootstrap-tpls-1.3.3.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <title>Search</title>
</head>

<body ng-controller="SearchController as search">
        <h4>Static arrays</h4>{{search.states}}
        <pre>Model: {{selected | json}}</pre>
        <input type="text" ng-change="onedit()" ng-model="selected" uib-typeahead="state for state in search.states | filter:$viewValue | limitTo:8">

JS:

 (function () {

    var app = angular.module('search', []);

    app.controller('SearchController', ['$window', '$http', function ($window, $http){                     
        var search = this;
        search.states = ['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 Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

Please provide plunker or jsfiddle which reproduce the issue — Varit J Patel
– Varit J Patel, Commented Jul 12, 2016 at 5:25

Dilip Dalwadi · Accepted Answer · 2017-02-20 05:09:50Z

//Define "ui.bootstrap" dependency here

var app = angular.module('search', ['ui.bootstrap']);
app.controller('SearchController', function ($scope){                     
	$scope.selected="";

    //  Set your object 
	$scope.objects = [
		{id:1, name : 'Dilip', type :{ title : 'a'}},
		{id:2, name : 'Devendra', type :{ title : 'b'}},
		{id:3, name : 'Jayesh', type :{ title : 'a'}},
		{id:4, name : 'Jekin', type :{ title : 'c'}},
		{id:5, name : 'Gaurang', type :{ title : 'a'}},
		{id:6, name : 'Bhavin', type :{ title : 'e'}},

	];

});

<!DOCTYPE html>
<html ng-app="search">

<head>
  <meta charset="UTF-8">
  <title>dynamic form</title>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script>

</head>

<body ng-controller="SearchController">

<!--  in uib-typeahead specify that property / attribute name which you want to display in drop down 

in filter service specify an object with which you want to compare 
for example if you want to compare this object by type then 

filter : { type : $viewValue }

-->
<input type="text" ng-model="selected" uib-typeahead="object.name for object in objects | filter: {name:$viewValue} | limitTo:8">
</body>
</html>

naresh vadlakonda · Accepted Answer · 2016-07-12 06:06:58Z

4

i have tested the code.it working fine you can have look https://plnkr.co/edit/pThmY2vMX4XmF1YGEnki?p=preview

html:

  <body ng-controller="SearchController">
<div>seleted state: {{selected}}</div>
        <input type="text" ng-change="onedit()"  ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8">
  </body>

javascript:

var app = angular.module('search', ['ui.bootstrap']);
    app.controller('SearchController', ['$window', '$http','$scope', function ($window, $http,$scope){                     
      $scope.selected="";
        $scope.states = ['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 Dakota', 
        'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 
        'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 
        'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 
        'West Virginia', 'Wisconsin', 'Wyoming'];

}]);

edited Jul 12, 2016 at 6:06

answered Jul 12, 2016 at 5:36

naresh vadlakonda

4071 gold badge4 silver badges13 bronze badges

7 Comments

Jamesjin Over a year ago

Thank you, I just tried this, it is still not working?

naresh vadlakonda Over a year ago

k am working on it. i will give u complete solution as soon

Jamesjin Over a year ago

Thanks a lot, how can I contact that if you need me send you my html and js?

naresh vadlakonda Over a year ago

i don't need your code. i will give the example.just manipulate it

naresh vadlakonda Over a year ago

its working.try this once.check the cdn's and sequence properly

|

Technologeek · Accepted Answer · 2016-07-12 05:46:33Z

1

If you check out the usage parameters mentioned on their official site https://angular-ui.github.io/bootstrap you must include a dependency in your file which is

angular.module('myModule', ['ui.bootstrap']);

answered Jul 12, 2016 at 5:46

Technologeek

1901 gold badge2 silver badges13 bronze badges

Comments

Jairo Malanay · Accepted Answer · 2016-07-12 05:46:46Z

1

You are missing the dependencies.

according to angular.ui.bootstrap the dependencies are

AngularJS
Angular-animate
Angular-touch
Bootstrap CSS

and you also forgot to inject them

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);

here is the example from the documentation: Typehead

answered Jul 12, 2016 at 5:46

Jairo Malanay

1,3479 silver badges13 bronze badges

3 Comments

Jamesjin Over a year ago

where can I find Angular-animate and Angular-touch? thanks

Jairo Malanay Over a year ago

@Jamesjin it is better if you open the example.. its fully working and all things you need is already in there

mjwrazor Over a year ago

You only need AngularJs and Bootstrap for typeahead to work. Animate an touch are for other directives. But if you just need typeahead to work then you don't need them.

Vineet Baj · Accepted Answer · 2018-10-04 09:25:20Z

Use uib-typeahead for autocomplete. Code referred from the http://angular-ui.github.io/bootstrap/

<input type="text" ng-model="optSelected" ng-model-options="options" uib-typeahead="country for country in countries | filter:$viewValue | limitTo:5" typeahead-on-select="onSelectCountry()" >

In Controller:

$scope.countries = ['a','b','c',.....];  //List of countries to choose from
var x;

$scope.optSelected = function(value) {
  if (arguments.length) {
      x = value;
  } else {
      return x;
  }
};

$scope.onSelectCountry = function(){
          //Code you want to perform on selecting an option
          //x is the value printed on the input text element
}

$scope.options = {
    debounce: {
          default: 500,
          blur: 250
    },
    getterSetter: true
};

Also you need to inject it.

angular.module('bootstapDemo', ['ngAnimate', 'ui.bootstrap']);

Collectives™ on Stack Overflow

Angularjs typeahead example is always not working

5 Answers 5

Comments

7 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

7 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related