Typeahead / Rails: not working

Question

I use Elasticsearch and Typeahead in a Rails application to do autocomplete. I got this idea from here.

https://shellycloud.com/blog/2013/10/adding-search-and-autocomplete-to-a-rails-app-with-elasticsearch

I have elasticsearch autocomplete configured correctly because it works when I access it directly through a browser. However, when I try to use typeahead to call the displayed data from an autocomplete request, it does not even start in my debugger. Here is my form and javascript where typeahead is called

The form

<script>
  $('#autcomplete_search').typeahead({
    highlight: true
  },
  {
    name: 'apple_game',
    remote: "/search/autocomplete?query=%QUERY"
  });
</script>

<h1>Keyword</h1>
<form action="/search/keyword">
  <div>
    <%= text_field_tag :query, params[:query], class: "form-control", id: "autcomplete_search" %>
    <br/>
    <br/>
  </div>
  <div>
    <input type="submit">/</input>
  </div>
</form>

controller

  def autocomplete
    es = ESClient.get_client
    games = es.suggest index: 'games',
      body: { 
        apple_game: {
          text: params[:keyword],
          completion: {
            field: "title"}
        }
      }
    render json: games
  end

Example browser result from controller method

{
    "_shards": {
        "total": 5,
        "successful": 5,
        "failed": 0
    },
    "apple_game": [
        {
            "text": "ma",
            "offset": 0,
            "length": 2,
            "options": [
                {
                    "text": "Macabre Mysteries: Curse of the Nightingale Collector Edition HD",
                    "score": 1
                },
                {
                    "text": "Mad Cop - Police Car Race and Drift (Ads Free)",
                    "score": 1
                },
                {
                    "text": "Mad Freebording (Snowboarding)",
                    "score": 1
                },
                {
                    "text": "Mad Merx: Nemesis",
                    "score": 1
                },
                {
                    "text": "Mad River Whitewater Kayak Rush",
                    "score": 1
                }
            ]
        }
    ]
}

EDIT I also noticed the following error in the console when starting typeahead

Uncaught Error: missing source 

Answer 1

, , .

1:

, API- pre-10.0. , Bloodhound - .

, :

var $vartypeahead = $(yourjqueryelement);
var engine = new Bloodhound({
  name: 'typeaheads',
  remote: {"url":'/search/typeahead?q=%QUERY'},
  datumTokenizer: function(d) { return d;},
  queryTokenizer: function(d) { return d;}
});
engine.initialize();

$vartypeahead.typeahead({
          "minLength": 2,
          "highlight": true
        },
        {
          "source": engine.ttAdapter()
          });

, ; ( PR typeahead)

№ 2

ES, , , typeahead :

{
  "settings": {
    "analysis": {
      "filter": {
        "autocomplete_ngram": {
          "max_gram": 24,
          "min_gram": 2,
          "type": "edge_ngram"
        }
      },
      "analyzer": {
        "autocomplete_index": {
          "filter": [
            "lowercase",
            "autocomplete_ngram"
          ],
          "tokenizer": "keyword"
        },
        "autocomplete_search": {
          "filter": [
            "lowercase"
          ],
          "tokenizer": "keyword"
        }
      }
    },
    "index": {
      "number_of_shards": 20,
      "number_of_replicas": 1
    }
  },
  "mappings": {
    "yourtype": {
      "properties": {
        "title": {
          "type": "multi_field",
          "fields": {
            "title_edgengram": {
              "type": "string",
              "index": "analyzed",
              "index_analyzer": "autocomplete_index",
              "search_analyzer": "autocomplete_search"
            },
            "title": {
              "type": "string",
              "index": "not_analyzed"
            }
          }
        }
      }
    }
  }
}