I'm following a code found in AngularJS API documentation for "typeahead": /

I am able to fill the text box with the first choice by pressing enter, but for some reason, I cannot select through any of the items from the autoplete list with my arrow keys (up and down), but in their example, I could.

What could be the problem here?

** Note, this is an Express project, and I'm using the Jade engine.

Header files

link(rel='stylesheet', href='/css/bootstrap.css')
script(src='/js/jquery-2.1.1.min.js')
script(src='/js/angular.min.js')
script(src='/js/bootstrap.min.js')
script(src='/js/ui-bootstrap-tpls-0.11.0.min.js')
script(src='/js/index.js')

partial code in index.html

<div ng-controller="TypeaheadCtrl" class="col-md-5 ng-scope">
    <pre class="ng-binding">Model {{selected}}</pre>
    <input type="text" ng-model="selected" placeholder="item name" typeahead="item for item in items | filter:$viewValue | limitTo:8" class="form-control" >
</div>

index.js

var App = angular.module('myApp', ['ui.bootstrap']);
function TypeaheadCtrl( $scope, $http ) {
    $scope.selected = undefined;
    $scope.items = ['Chicken', 'Corn', 'Ice Cream', 'Cereal'];
}

After playing around a bit more, I found that there's another autoplete from my browser. Probably chrome autofill? Maybe my up and down is being used for this instead of being used for my web app? If so, how would you disable that via code so I can use it for angular's autoplete on this page only?

I'm following a code found in AngularJS API documentation for "typeahead": http://angular-ui.github.io/bootstrap/

I am able to fill the text box with the first choice by pressing enter, but for some reason, I cannot select through any of the items from the autoplete list with my arrow keys (up and down), but in their example, I could.

What could be the problem here?

** Note, this is an Express project, and I'm using the Jade engine.

Header files

link(rel='stylesheet', href='/css/bootstrap.css')
script(src='/js/jquery-2.1.1.min.js')
script(src='/js/angular.min.js')
script(src='/js/bootstrap.min.js')
script(src='/js/ui-bootstrap-tpls-0.11.0.min.js')
script(src='/js/index.js')

partial code in index.html

<div ng-controller="TypeaheadCtrl" class="col-md-5 ng-scope">
    <pre class="ng-binding">Model {{selected}}</pre>
    <input type="text" ng-model="selected" placeholder="item name" typeahead="item for item in items | filter:$viewValue | limitTo:8" class="form-control" >
</div>

index.js

var App = angular.module('myApp', ['ui.bootstrap']);
function TypeaheadCtrl( $scope, $http ) {
    $scope.selected = undefined;
    $scope.items = ['Chicken', 'Corn', 'Ice Cream', 'Cereal'];
}

After playing around a bit more, I found that there's another autoplete from my browser. Probably chrome autofill? Maybe my up and down is being used for this instead of being used for my web app? If so, how would you disable that via code so I can use it for angular's autoplete on this page only?

• javascript
• jquery
• angularjs
• twitter-bootstrap
• autoplete

• I am not able to replicate your problem. Please use this plunk and tell me if you face the problem: plnkr.co/edit/imT6uvBqiP4IYKZtmuZs Use this to test in your browser run.plnkr.co/plunks/imT6uvBqiP4IYKZtmuZs As per ng-ui-bootstrap docs you do not need to include bootstrap.js in your code – DineshKP Commented Jul 9, 2014 at 5:09
• It works in Plunker, but it doesn't work when I host it locally on my laptop. And thanks for telling about about the bootstrap docs! Helped me a lot! – Vongdarakia Commented Jul 9, 2014 at 11:56
• I'm also using the Jade engine on the server side by the way. Could that also be the problem? – Vongdarakia Commented Jul 9, 2014 at 14:38
• 1 I found the problem, but it's still unclear. It has nothing to do with Jade. I've tried it on a regular setup, and still didn't get any highlights. What I noticed in the debugger was that in the Plunker example, the 'class' of the autoplete items (of the ul) were being set to active when selected, but locally for me, it wasn't. The options were changing for sure, but the highlighting wasn't. So my up and down was working, but the highlighting wasn't. I still don't know why that happened. – Vongdarakia Commented Jul 10, 2014 at 5:09
• 1 @Dinesh The real problem was really the version of angular that I was using. I was using the latest version, 1.3.0, which apparently is buggy and has some problems with active index and ng-mouseenter, so no index of the list was being set to active. I'm now using 1.2.19 instead. Thanks for your help though. – Vongdarakia Commented Jul 10, 2014 at 17:32

3 Answers 3

Try setting autoplete="off" at the <form> or <input> level.

The docs for autoplete can be found in Mozilla's <input> section

I found the problem! The AngularJS version 1.3.0(beta), which I was using, was buggy. ng-mouseenter was not working and changing the selected index. I used the AngularJS version 1.2.19 (latest stable build) and it works perfectly now.

Problem Example (v1.3.0 beta-14) http://plnkr.co/edit/PazPIkWAce6e59OEmn7n?p=preview

<script src="https://code.angularjs/1.3.0-beta.14/angular.js"></script>

Working Example (v1.2.19 stable) http://plnkr.co/edit/pkbcsaPyJEJbCYVcZYpB?p=preview

<script src="https://code.angularjs/1.2.19/angular.min.js"></script>

I had to make this change in ui-bootstrap-tpls-0.11.0.js for it to work

 angular.module("template/typeahead/typeahead-popup.html", []).run(["$templateCache", function($templ
 $templateCache.put("template/typeahead/typeahead-popup.html",
-    "<ul class=\"dropdown-menu\" ng-if=\"isOpen()\" ng-style=\"{top: position.top+'px', left: positi
+    "<ul class=\"dropdown-menu\" ng-show=\"isOpen()\" ng-style=\"{top: position.top+'px', left: posi

Changing ng-if to ng-show fixed it