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.

score 0 · Answer 1 · answered Mar 25 '15 at 15:37

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 '15 at 15:37

Robert Cadmire

190
1
8

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. – gwyrlim Mar 25 '15 at 17:33
have you tried inline styling? like – Robert Cadmire Mar 25 '15 at 18:20
No. I found posts like this and didn't instigated it any further. http://stackoverflow.com/questions/13693482/is-there-a-way-to-apply-a-css-style-on-html5-datalist-options. I did a quick test now but I cant seam to get any effect on the list. Maby I'm missing something. – gwyrlim Mar 25 '15 at 19:42

steveo · Accepted Answer · 2015-03-25T15:51:00.230

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>

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. — gwyrlim, Mar 25 '15 at 19:48

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

2 Answers2