Angjular JS - multiple input fields breaks dropdown hack on ui.bootstrap.typeahead

Question

I'm trying to use a hack on ui.bootstrap.typeahead to add a dropdown. The hack found here. It will open a dropdown on a mouse click in the input field. I got it to work with on input field but when adding a second input like below, the dropdown stops working.

<input type="text" ng-model="selected" typeahead="item for item in items | filter:$viewValue:emptyOrMatch | limitTo:8" typeahead-focus >
<input type="text" ng-model="selected_2" typeahead="item for item in items | filter:$viewValue:emptyOrMatch | limitTo:8" typeahead-focus >

Here is a plunker to demonstrate the problem. Remove the second input and the dropdown will work. I have looked at the scope of the directive but I'm new to Angular and I can't figure out what's the problem and how to fix it. Any ideas would be appreciated.

steveo · Accepted Answer · 2015-03-25 15:51:00Z

0

Your code is fine. You just need to add this dependency in your plunk.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />

This will allow your dropdown to float over the top of your entry fields, rather than being blocked by them.

Here is the entire Index.HTML below. Or, view my Plunk here: http://plnkr.co/edit/X4lSmQ?p=preview

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

<head>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
  <script src="script.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <h1>Dropdown!</h1>
  <div>
    <div class="container-fluid" ng-controller="TypeaheadCtrl">
      <div class="form-group">
        <input type="text" ng-model="selected" typeahead="item for item in items | filter:$viewValue:emptyOrMatch | limitTo:8" typeahead-focus="" />{{selected}}
        <br />
        <!-- if following line is removed the dropdown works agina.-->
        <input class="col-lg-offset-4" type="text" ng-model="selected_2" typeahead="item for item in items | filter:$viewValue:emptyOrMatch | limitTo:8" typeahead-focus="" />{{selected_2}}

      </div>
    </div>
  </div>
</body>

</html>

edited Mar 25, 2015 at 15:51

answered Mar 25, 2015 at 15:44

steveo

3651 silver badge12 bronze badges

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

1 Comment

gwyrlim Over a year ago

Looks like updating my angular version from 1.2.28 to 1.3.15 also makes it work. Thanks for putting me on the right track. It look like I have some studding to do to.

Robert Cadmire · Accepted Answer · 2015-03-25 15:37:25Z

0

This is a much cleaner way (if you can use html5). First create a datalist

    <datalist id="items">
       <option ng-repeat="item in items" value="{{item.someValue}}"> </option>
    </datalist>

Then for your input.

<input class="input-sm form-control" id="itemsInput" type="search" list="items" />

Just make sure that list="x" and datalist id="x" are equal.

This will also "autocomplete" as you type

answered Mar 25, 2015 at 15:37

Robert Cadmire

1901 silver badge8 bronze badges

3 Comments

gwyrlim Over a year ago

Yes this is clean and it was the first i tried, however there seams to be no way to style the dropdown and that's why I chosen the ui-bootstrap hack.

Robert Cadmire Over a year ago

have you tried inline styling? like <option style="width: 25%;text-align: center; other css ;" ng-repeat="item in items" value="{{item.someValue}}"> </option>

gwyrlim Over a year ago

No. I found posts like this and didn't instigated it any further. stackoverflow.com/questions/13693482/…. I did a quick test now but I cant seam to get any effect on the list. Maby I'm missing something.

Collectives™ on Stack Overflow

Angjular JS - multiple input fields breaks dropdown hack on ui.bootstrap.typeahead

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related