UI.Bootstrap Angular Typeahead and Firebase Array

Question

Alright, I've tried and tried and tried to get this one right, But haven't.

I am trying to use Typeahead in the UI.Bootstrap for Angular JS with a Firebase Array as the data set.

Problem is, I can't get any results to show up when I type in the text Box. So what I have is below.

HTML

<table class="table table-hover table-striped" id="itemTable" ng-controller="typeaheadController as ty">
   <thead>
      <tr>
        <th colspan="5">
           <input type="text" ng-model="selected" typeahead="product.name for product in products | filter:{name: $viewValue}">
        </th>
      </tr>
   </thead>
</table>

Typeahead Controller

(function () {

angular
    .module('app')
    .controller('typeaheadController', typeaheadController);

    typeaheadController.$inject = ['$firebaseAuth', '$firebaseObject', '$state', 'firebaseUrl', '$scope', '$http'];

    function typeaheadController($firebaseAuth, $firebaseArray, $state, firebaseUrl, $scope, $http) {

      $scope.selected = undefined;

      var ref = new Firebase(firebaseUrl);

      var products = ref.child("products");

      $scope.products = $firebaseArray(products);

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

    }

})();

DataSet Firebase Array

{"$id":"products","$priority":null,"-Jr9RNmgtpm62DRcpzeR":{"description":"ProdcutProductProduct","name":"Test Product","pricing":{"cost":"10","markup":"20"},"sku":"029300889","type":"Product"},"-Jr9TZOI0cV9gSBi1lT4":{"description":"This is a test service.","name":"Test Service","pricing":{"cost":"100","markup":"20"},"sku":"4059834509","type":"Service"}}

I am wanting to search based on the name of each result.

HOW?

Answer 1

The data collection you are passing into the ui-bootstrap typeahead directive, contains properties that clearly don't refer to products and is probably confusing the directive. Try cleaning them out ($id and $priority) of the array before giving it to the typeahead directive:

// Store the raw response and assign the finished array, incase there are $watches on the $scope properties - we don't want to fire them for every change..
var products_raw = $firebaseArray(products);
delete products_raw.$id;
delete products_raw.$priority;
$scope.products = products_raw;

If this doesn't help, do you have any errors in your console? Are you able to post a working demo in JSFiddle or Codepen etc?