CODEWITHSUNDEEP
angularjsalgolia
user2954587
user2954587

Reputation: 4861

Algolia angular autocomplete not working

I'm trying to get the Angolia autcomplete directive for angular working but having trouble. I've tried following the example from the docs. I've been running into a few problems.

Specifically in getDatasets I'm currently receiving the error b.$watchCollection is not a function

I've made a plunkr. Does anyone have a working example using the algolia angular directive? 

  $scope.q = '';
  var client = algolia.Client('latency', '6be0576ff61c053d5f9a3225e2a90f76');
  var index = client.initIndex('contacts');
  $scope.getDatasets = function() {
    return {
      source: function(q, cb) {
        index.search(q, { hitsPerPage: 5 }, function(error, content) {
          if (error) {
            cb([]);
            return;
          }
          cb(content.hits);
        });
      },
      templates: {
        suggestion: function(suggestion) {
          return suggestion._highlightResult.name.value;
        }
      }
    };
  };
  $scope.$watch('q', function(v) {
    console.log(v);
  });
  $scope.$on('autocomplete:selected', function(event, suggestion, dataset) {
    console.log(suggestion, dataset);
  });

Upvotes: 1

Views: 964

Answers (1)

Shipow
Shipow

Reputation: 2447

I tried your plunkr and it seems that your version of angular is a bit old, I've updated it with the one from the example and it works.

// the main (app) module
angular
	.module("myApp", ['algoliasearch', 'algolia.autocomplete'])
	.controller("myCtrl", function($scope, algolia) {
    $scope.q = '';
      var client = algolia.Client('latency', '6be0576ff61c053d5f9a3225e2a90f76');
      var index = client.initIndex('contacts');
      $scope.getDatasets = function() {
      console.log('getting datasets')
        return {
          source: function(q, cb) {
            index.search(q, { hitsPerPage: 5 }, function(error, content) {
              if (error) {
                cb([]);
                return;
              }
              cb(content.hits);
            });
          },
          templates: {
            suggestion: function(suggestion) {
              return suggestion._highlightResult.name.value;
            }
          }
        };
      };
      $scope.$watch('q', function(v) {
        console.log(v);
      });
      $scope.$on('autocomplete:selected', function(event, suggestion, dataset) {
        console.log(suggestion, dataset);
      });
});
.algolia-autocomplete {
        width: 100%;
      }
      .algolia-autocomplete .aa-input, .algolia-autocomplete .aa-hint {
        width: 100%;
      }
      .algolia-autocomplete .aa-hint {
        color: #999;
      }
      .algolia-autocomplete .aa-dropdown-menu {
        width: 100%;
        background-color: #fff;
        border: 1px solid #999;
        border-top: none;
      }
      .algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
        cursor: pointer;
        padding: 5px 4px;
      }
      .algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
        background-color: #B2D7FF;
      }
      .algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
        font-weight: bold;
        font-style: normal;
      }
<script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.angular.min.js"></script>
<script src="//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.angular.min.js"></script>



<body ng-app="myApp" ng-controller="myCtrl">
    <div class="container">
      <form action="#">
        <div class="autocomplete-wrapper">
          <input id="contacts" name="contacts" type="text" ng-model="q" autocomplete aa-datasets="getDatasets()" />
        </div>
      </form>
    </div>
</body>

Upvotes: 1

Related Questions