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, Jul 12 '16 at 05:25

score 6 · Answer 1 · answered Feb 20 '17 at 05:09

//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 · Answer 2 · 2016-07-12T06:06:58.107

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 '16 at 06:06

answered Jul 12 '16 at 05:36

naresh vadlakonda

407
1
4
13

Thank you, I just tried this, it is still not working? – Jamesjin Jul 12 '16 at 05:40
k am working on it. i will give u complete solution as soon – naresh vadlakonda Jul 12 '16 at 05:42
Thanks a lot, how can I contact that if you need me send you my html and js? – Jamesjin Jul 12 '16 at 05:44
i don't need your code. i will give the example.just manipulate it – naresh vadlakonda Jul 12 '16 at 05:48
its working.try this once.check the cdn's and sequence properly – naresh vadlakonda Jul 12 '16 at 06:08
Thank you, I just tried as your code again, it is working, thanks a lot – Jamesjin Jul 12 '16 at 06:41
why did you write uib-typeahead ? although it worked for me too but i want to know how – Usman Iqbal Sep 16 '16 at 09:56

score 1 · Answer 3 · answered Jul 12 '16 at 05:46

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 '16 at 05:46

Technologeek

190
1
2
13

score 1 · Answer 4 · answered Jul 12 '16 at 05:46

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 '16 at 05:46

Jairo Malanay

1,327
9
13

where can I find Angular-animate and Angular-touch? thanks – Jamesjin Jul 12 '16 at 06:01
@Jamesjin it is better if you open the example.. its fully working and all things you need is already in there – Jairo Malanay Jul 12 '16 at 06:15
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. – mjwrazor Oct 07 '16 at 18:12

score 0 · Answer 5 · answered Oct 04 '18 at 09:25

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']);

Angularjs typeahead example is always not working

5 Answers5