TypeError: Cannot set property 'highlight' of undefined

[a1Gupta]

I am trying to use angular-typeahead in my app

This is the code of app.js file:

var myApp = angular.module('myApp', ['ngRoute','siyfion.sfTypeahead']);

myApp.factory('websitesSvc',function($http, $log, $q) {
return {
    getwebsites: function(){

        //Create a promise using promise library
        var deferred = $q.defer();

        $http({method: 'GET', url: '/api/websites/'}).
            success(function(data, status, headers,config){
                deferred.resolve(data);
            }).
            error(function(data, status, headers,config){
                deferred.reject(status);
            });

        return deferred.promise;
    }
};
});

myApp.controller('MyCtrl', ['$scope','websitesSvc','$timeout',
function($scope,websitesSvc,$timeout) {

$scope.searchString=null;


websitesSvc.getwebsites().then(function(websites){
 $scope.websites = websites;
}); 

$timeout(function() {
var websites = new Bloodhound({
datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.domain_name); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
local:$scope.websites,
});

// initialize the bloodhound suggestion engine
 websites.initialize();

$scope.numbersDataset = {
displayKey: 'domain_name',
 source: websites.ttAdapter()
};

// Typeahead options object
$scope.exampleOptions = {
 highlight: true
}; 
},1000);

 }
]);

Adding delay so that the services are executed first and then the data fetched can be passed to typeahead for search suggestions.But I am getting following errors in console .
How should I change my code to debug this?

[jdart]

I got this as well. To work around it I get bloodhound to do the fetching for me, so rather than using 'local' with an array, I used 'remote' with a url that responds with json.

bloodhound = new Bloodhound({
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.name) },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: 'http://....'
});

[rahilsondhi]

Yes, you definitely want bloodhound to do the fetching for you. This is how I do it in my controller:

myApp.controller 'ArtistsCtrl', ($scope) ->
  # Typeahead
  artists = new Bloodhound
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value')
    queryTokenizer: Bloodhound.tokenizers.whitespace
    remote: '/search.json?q=%QUERY&type=artist'
  artists.initialize()
  $scope.artistsData =
    name: 'artists'
    displayKey: 'name'
    source: artists.ttAdapter()

[Siyfion]

I think these guys have summed up your issue quite nicely, you aren't using the Bloodhound suggestion engine, which is a core part of the Twitter Typeahead library. Use it, and you'll probably find most of your issues are solved. ;)