在rails app中预先输入:仅将JSON请求附加到一个特定请求,而不是通过预取将JSON请求附加到每个请求

Nei*_*eil 13 javascript ruby json ruby-on-rails twitter-typeahead

提前类型功能适用于应有的位置.但问题是,类型提前功能是在数据的每个请求上发出JSON请求时,它实际上只发生在一个特定请求上.

我有以下控制器:

#controllers/agencies_controller.rb
class AgenciesController < ApplicationController

  def get_unique_agency_names
    @unique_agency_names = Agency.uniq.pluck(:name)
    respond_to do |format|
      format.json { render json: @unique_agency_names }
    end
  end
  ...
end
Run Code Online (Sandbox Code Playgroud)

我的javascript文件中有以下内容:

#app/assets/javascripts.agencies/index.js
$(document).ready(function(){
  /* For typeahead functionality on name input of search form for agencies */
  var agency_names = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: '../agencies/get_unique_agency_names.json'
  });

  $('#prefetch .typeahead.name_input').typeahead(null, {
    name: 'agency_names',
    source: agency_names
  });
});
Run Code Online (Sandbox Code Playgroud)

只是为了完成,这里是我希望这个功能发生的地方:在这种形式:

# just showing the relevant part of the form
<div class="form-group" id="prefetch">
  <%= f.label :name_cont, "Agency Name" %>
  <%= f.text_field :name_cont, class: "form-control typeahead name_input", placeholder: "Enter Agency Name" %>
</div>
Run Code Online (Sandbox Code Playgroud)

这是我的相关路线 config/routes.rb

resources :agencies do
  collection do
    get 'get_unique_agency_names'
  end
end
Run Code Online (Sandbox Code Playgroud)

我的具体问题是:我怎样才能确保GET "/agencies/get_unique_agency_names"只在它应该被调用时?现在它正在为每个请求附加此JSON请求.我只希望为一个特定请求发生JSON请求.

Twitter的Type Ahead示例

Abs*_*Abs 3

我想你需要这个

  $('#prefetch .typeahead.name_input').typeahead(null, {
    generateOnLoad:false,
    name: 'agency_names',
    source: agency_names
  });
Run Code Online (Sandbox Code Playgroud)

generateOnLoad {布尔值}

空(默认)

如果启用,源数据将在页面加载时生成(执行 Ajax 请求并准备要搜索的数据),而不是等待输入聚焦。

PN:除非调整其他一些配置,否则此选项不能与dynamic: true一起很好地工作。

另外,如果您发现 Rails 清单文件将您的调用添加到每个页面,只需在绑定前面类型之前检查元素是否存在:

if($('#prefetch .typeahead.name_input').length){
      $('#prefetch .typeahead.name_input').typeahead(null, {
        generateOnLoad:false,
        name: 'agency_names',
        source: agency_names
      });
}
Run Code Online (Sandbox Code Playgroud)