Question

用户指定城市。自动完成应该通过输入的第一个字母进行。

如果在字段中输入第一个字母，例如＆＃34; Ber ...＆＃34;，则没有任何反应。

我如何运行搜索和自动填充城市的脚本？

我在Gemfile中指定了gem作为依赖：

gem 'twitter-typeahead-rails'

的application.js

//= require jquery
//= require jquery.turbolinks
//= require underscore
//= require json2
//= require judge
//= require registration
//= require jquery-ui
//= require tag-it
//= require jquery_ujs
//= require chosen
//= require cocoon
//= require jquery-fileupload/basic
//= require twitter/typeahead
//= require freelancers
//= require response
//= require projects
//= require cities_germany
//= require turbolinks

资产/ JavaScript的/ cities_germany.js

var cities = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('num'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: [{ city: 'Berlin (Berlin)'},
          { city: 'Hamburg (Hamburg)'},
          { city: 'München (Bavaria)'}, 
          { city: 'Köln (Northrhine-Westfalia)'},
          { city: 'Frankfurt (Hessen)'}, 
          { city: 'Essen    (Northrhine-Westfalia)'}, 
          { city: 'Dortmund (Northrhine-Westfalia)'},
          { city: 'Stuttgart (Baden-Württemberg)'}, 
          { city: 'Düsseldorf   Northrhine-Westfalia'}, 
          { city: 'Bremen (Bremen)'},
          { city: 'Hannover (Lower Saxony)'}, 
          { city: 'Duisburg (Northrhine-Westfalia)'}, 
          { city: 'Nürnberg (Bavaria)'},
          { city: 'Leipzig  (Saxony)'}, 
          { city: 'Dresden  (Saxony)'}
          ]
});

// initialize the bloodhound suggestion engine
cities.initialize();

$('#main-cities .typeahead').typeahead(null, {
  displayKey: 'city',
  source: cities.ttAdapter()
});

我在表格html中添加了下一个字段：

<li class="form-fields__group form-fields__group_full">
              <%= f.label 'City' %>
              <div class="field" id="main-cities">
                <%= f.text_field :location, class: 'typeahead' %>
              </div>
            </li>

Answer 1

我创建了错误：

将cities.initialize（）替换为cities.initialize（）;和空格（'num'）到空格（'city'）

不要使用twitter-typeahead-rails进行自动完成工作

1 个答案: