Typeahead仅适用于本地基准

时间:2013-12-03 23:52:12

标签: ruby-on-rails twitter-bootstrap ruby-on-rails-4 bootstrap-typeahead

我在网络应用中使用typeahead,但它只适用于本地数据。有关这个问题的任何建议吗? 使用本地数据: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> 

使用预取数据: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>

输入字段为:

<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>

1 个答案:

答案 0 :(得分:0)

设置自动填充的Javascript     

    $(function() {

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

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

自动填充字段的表单:

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

我的解决方案显然不是在本地加载,但这是我首选的方法,因为我有一个非常小的列表,我喜欢控制。