CODEWITHSUNDEEP
javascriptcssangularjstypeahead.jsbootstrap-typeahead
thank_you
thank_you

Reputation: 11107

Typeahead doesn't display text in dropdown

UPDATE

Plunker demo here.

Original Question

I've set up typeahead with angular bootstrap. Everything is working expect that none of the text is displayed.

My html...

<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue"></input>

My JS...

angular.module('controllers')

.controller('BudgetTrackersCtrl', ["$scope", function($scope) {

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

}]);

My console returns no errors.

When I type in text into the inpt, I see the dropdown with the appropriate number of results returned, but no text. The left image is when the dropdown first appears and the image on the right is when my mouse hovers over one of the selections.

enter image description here

The html of the li is below:

<li ng-repeat="match in matches" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" class="ng-scope active">
  <a tabindex="-1" ng-click="selectMatch($index)" ng-bind-html-unsafe="match.label | typeaheadHighlight:query"></a>
</li>

What's wrong and how do I fix this?

Upvotes: 3

Views: 1221

Answers (3)

Christian
Christian

Reputation: 727

I know this goes back half a year and hopefully you've already solved that issue yourself.

But for everyone else: To me it looks like suggestions are being displayed (otherwise the dropdown suggestions box would be very narrow), but the colour is white on a white nackground. Try changing the font to a darker colour in your CSS file.

Upvotes: 0

SgtPepper43
SgtPepper43

Reputation: 544

Check out this modification of Bootstrap-UI's plunker: http://plnkr.co/edit/Ow7G9ZcHfAvdxPYo7OPz?p=preview

First, you can't just pass typeahead-on-select alert(123), you have to pass it a function that then calls alert(123) inside.

<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control" typeahead-on-select="callback()">

JS:

$scope.callback = function () {
  alert(123);
};

This may just be a typo, but you also have typeahead-on-select in quotes.

Beyond that, it should work like the plunker I linked to. If that doesn't help you need to make one yourself that we can check out.

Edit

As I said in the comment to your comment after you got the plunker up, the problem with your code is in test.js, which looks to be a minified version of about 1/3 of what you should be importing (//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js). Including the full version fixes your problem. It might also be an old version or something. An explanation of what that file is would be useful.

Upvotes: 5

Ruben Nagoga
Ruben Nagoga

Reputation: 2218

You forgot to add //angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js as a script.

Here is working version plunker

Upvotes: 2

Related Questions