title: Elasticsearch.js AngularJS autocomplete
body: <p>I'm trying to implement an autocomplete feature using Elasticsearch, angularJS and bootstrap.</p>
  
  <p>I've got inspired by this solution :
  <a href="https://stackoverflow.com/questions/26461541/autocomplete-typeahead-angularjs-bootstrap-on-elasticsearch">autocomplete/typeahead angularjs bootstrap on elasticsearch</a></p>
  
  <p><strong>This is my Angular code:</strong></p>
  
  <pre><code>angular.module('cineAngularApp')
       .service('client', function (esFactory) {
          return esFactory({
              host: 'localhost:9200',
              apiVersion: '2.2',
              log: 'trace'
          });
       });
  
   angular.module('cineAngularApp')
   .controller('AutocompleteCtrl', function ($scope,client) {
  
      $scope.getResult = function(val){
  
          return client.search({
              index: 'autocomplete_test',
              fields: 'city', 
              q: 'city:'+val
          }).then(function (resp) {
              var keywords = [];
              for(var i in resp.hits.hits){
                  var fields = (resp.hits.hits[i]).fields["city"];
                  keywords.push(fields);
              }
              return keywords;
          }, function (err) {
              console.trace(err.message);
          });
      };
   });
  </code></pre>
  
  <p><strong>Here is my problem</strong></p>
  
  <p>The above code works fine when I use a simple query, but as soon as I change the query by adding <em>body</em> it doesn't work.</p>
  
  <pre><code> angular.module('cineAngularApp')
   .controller('AutocompleteCtrl', function ($scope,client) {
  
      $scope.getResult = function(val){
  
          return client.search({
              index: 'autocomplete_test',
              fields: 'city', 
              body: {
                  query: {
                      match: {
                          city: val
                      }
                  }
              }
          }).then(function (resp) {
              var keywords = [];
              for(var i in resp.hits.hits){
                  var fields = (resp.hits.hits[i]).fields["city"];
                  keywords.push(fields);
              }
              return keywords;
          }, function (err) {
              console.trace(err.message);
          });
      };
   });
  </code></pre>
  
  <p>I don't know if it can help but I've also noticed when debugging that it's not a POST request anymore but it's an OPTION one.</p>
  
  <p>Thanks in advance for your help.</p>