使用 AJAX 预填充 Select2 - “未找到结果”

Posted 2023-05-07

【中文标题】使用 AJAX 预填充 Select2 - “未找到结果”

【英文标题】：Pre populating Select2 using AJAX - "No Results Found"

【发布时间】：2016-10-30 15:08:40

【问题描述】：

我一直在按照这个示例指南 (http://rails-select2-example.herokuapp.com/) 创建一个 select2 下拉菜单来从我的数据库中搜索国家/地区。

但是，选择框总是以“未找到结果”返回为空。为什么它不会从 js/ajax 中获取值？

查看（new.html.erb）

          <select class="form-control" id="country_select">
          </select>

控制器（Searches_controller.rb）

class SearchesController < ApplicationController
before_action :require_user
respond_to :html, :json

    def new
        @countries = Country.all
        respond_with @countries
    end
end

javascript

  $('#country_select').select2(
    theme: "bootstrap",
    ajax: 
      url: "<%= user_searches_path(format: 'json') %>",
      dataType: "json",
      results: function(data, page) 
        return  results: $.map( data, function(country, i)  
          return  id: country.id, text: country.name  
         ) 
      
    
  );

路线

resources :users do
    resources :searches
  end

搜索迁移

class CreateSearches < ActiveRecord::Migration

  def change
      t.string :country
   end
      add_index :searches, [:user_id, :created_at]

  end
end

【参考方案1】：

可以直接使用 Rails Helper Method，而不是使用 AJAX，在国家/地区进行搜索

见下面的例子：

在您的 application_helper.rb 文件中创建一种方法：

def get_country
  Country.pluck(:name,:id)
end

在您的视图文件中：

<%= f.select :country_select, get_country, prompt: 'Select Country' %>

最后，添加js代码如下：

$("#country_select").select2(
  placeholder: "Select Country"
);

【讨论】：

啊哈好吧，我现在试试这个。使用 Rails Helper 而不是 AJAX 有什么好处。既然 AJAX 这么复杂，为什么人们还要使用它？

如果您使用 Rails，在这种情况下，下拉菜单会在初始化时填充选项。而 AJAX 主要用于具有条件条件的情况，例如，如果选择国家，则需要基于国家选择的状态。如果你有任何 JavaScript 错误，那么在这种情况下你的 AJAX 会失败。

好的，我现在收到此错误，#<0x007fc7f79217d0>

【参考方案2】：

由于您在新操作中编写了代码，因此您调用的URL是错误的， 如果您想从新操作中调用，

class SearchesController < ApplicationController
before_action :require_user
respond_to :html, :json

    def new
        @countries = Country.all
        respond_with @countries
    end
end

要么像这样更改 ajax 调用中的 url，

  $('#country_select').select2(
    theme: "bootstrap",
    ajax: 
      url: "<%= new_user_search_path(format: 'json') %>",
      dataType: "json",
      results: function(data, page) 
        return  results: $.map( data, function(country, i)  
          return  id: country.id, text: country.name  
         ) 
      
    
  );

或者把代码改成索引动作，

class SearchesController < ApplicationController
before_action :require_user
respond_to :html, :json

    def index
        @countries = Country.all
        respond_with @countries
    end
end

然后，你可以使用你的那个网址，

  $('#country_select').select2(
    theme: "bootstrap",
    ajax: 
      url: "<%= user_searches_path(format: 'json') %>",
      dataType: "json",
      results: function(data, page) 
        return  results: $.map( data, function(country, i)  
          return  id: country.id, text: country.name  
         ) 
      
    
  );

【讨论】：

嗨@sravan，所以在使用你的新操作后，选择框卡在“搜索”上，我有以下错误

Started GET "/users/1/searches/new.json?q=aus" for ::1 由 SearchesController#new 处理为 JSON 参数："q"=>"aus", " user_id"=>"1" 用户负载 (0.1ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? [["id", 1]] 已完成 500 内部服务器错误 ActionView::MissingTemplate - 缺少模板搜索/新建、应用程序/新建 :locale=>[:en], :formats=>[:json], :variants =>[], :handlers=>[:erb, :builder, :raw, :ruby, :coffee, :jbuilder]。

那么方法调用是正确的，只需在views/searches中添加new.html.erb文件

奇怪的是已经有了那个页面，javascript 正在从 app/views/searches/new 页面运行。 (new.html.erb)

k，因为你已经给了json它的搜索fir一个js文件，添加new.js.erb