Typeahead only works with local datums

Question

I use typeahead in my web app, but it only works with local data. Any suggestion on this problem? With local data: https://www.dropbox.com/s/w1kdydubfx35662/2.png

<script>
        $(document).ready(function() {
             $('#location').typeahead({
         name: 'locations',
             local: ["suggestion1", "suggestion2", "suggestion3", "suggestion4","abc"],
             limit:4 
         });
     });
</script> 

With prefetch data: https://www.dropbox.com/s/au7rabcfd7qmfuy/1.png

 <script>
    $(document).ready(function() {
         $('#location').typeahead({
     name: 'locations',
         prefetch: {url:"http://twitter.github.io/typeahead.js/data/countries.json",
                    ttl:100
                   },
         limit:4 
     });
 });
 </script>

The input field is:

<div class="input-group" >
<div class="form-inline">
  <%= form_tag(location_search_path,method: "get" ) do %>
  <%= text_field_tag('location', params[:location], :size => 150, :placeholder=> "Enter city or zip code", :autofocus=>true) %> 
  <%= button_tag(type: "submit", class: "btn  btn-success ", id:"bu") do %>
   Search 
         <i class="icon-search"></i>
  <% end %>
<% end %>
</div>

Answer 1

Javascript to setup autocomplete

    $(function() {

        spells = ["Barrier", "Clairvoyance", "Clarity", "Cleanse", "Exhaust", "Flash", "Garrison", "Ghost", "Heal", "Ignite", "Revive", "Smite", "Teleport"]

        $(".summoner_spells").autocomplete({
                 source: spells,
                 minLength: 1
        });
    });
</script>

Form for the autocomplete field:

<%= simple_form_for @game do |f| %>
    <%= f.input :summoner1, input_html: {class: "summoner_spells"} %>
    <%= f.button :submit %>
<% end %>

My solution is obviously not loading not locally but this is my preferred method as I have a very small list that I like to have control over.