添加自动完成功能，导轨与selectize.js

它已经两天我打一个“简单”的任务的应用程序。在我的Rails应用程序的表单中添加自动填充字段。添加自动完成功能，导轨与selectize.js

我运行红宝石2.3.3和5.0.1轨道。到目前为止，我已经尝试了一堆不同的选项，例如： - Elasticsearch - Rails-jquery-autocomplete

现在，我要去selectize.js。我加入了宝石我的Gemfile：

gem "selectize-rails"

而且我已经在我的application.js

//= require jquery 
//= require jquery_ujs 
//= require selectize 
//= require turbolinks 
//= require bootstrap-sprockets 
//= require_tree . 
//= require main

我已经创建了我的控制，从表中的所谓兴趣返回数据的动作包括它一个JSON格式：

def users_interests_search 
    @interests = Interest.all 
    respond_to do |format| 
     format.js {} 
     format.json {render json: @interests} 
    end 
end

而且在我的剧本，我使用了以下内容（使用rottenTomato例如，从here拍摄）：

$('.test-selectize').selectize({ 
    valueField: 'title', 
    labelField: 'title', 
    searchField: 'title', 
    options: [], 
    create: false, 
    render: { 
     option: function(item, escape) { 
      return '<div>' + 
         '<span class="title">' + 
          '<span class="ciccioname">' + item.name + '</span>' + 
         '</span>' + 
        '</div>'; 
     } 
    }, 
    load: function(query, callback) { 
     if (!query.length) return callback(); 
     $.ajax({ 
      url: '/users-interests-search', 
      type: 'GET', 
      dataType: 'json', 
      success: function(res) { 
       console.log(res); 
       console.log(res[0].name) 
       $('selectize-dropdown-content').append('<span class="ciccioname">' + res[0].name + '</span>') 
      } 
     }); 
    } 
    });

虽然我确实看到了AJAX调用制成，并且JSON返回，没有多少是实际的页面上。

对此问题的任何建议是非常欢迎（或任何其他类型的帮助，以获得一个自动完成系统，并为此运行:)）。

干杯！安德烈

更新：这里是改变Ajax调用后的控制台输出（见上文）

Console screenshot

来源

2017-01-24 Andrea Rocca

那你在浏览器的控制台中看到的？我在猜测某种错误？您的后端似乎发送了一组感兴趣的数据，但您只需调用'res.name'，而无需迭代它们。 – Wukerplank

嗨@Wukerplank - 是的，我确实应该迭代数组，但是我仍然通过使用res [0] .name（在控制台中记录时显示我正在查找的数据时）获得相同的行为。 –

您可以在浏览器中添加您收到的结果吗？也许它的根是一本字典，你需要调用'RES [“利益”] [0] .name' – Wukerplank

最终，我选择了一个更简单的解决方案。

这是我的控制器：

def users_interests_search 
    term = params[:term] || nil 
    @interests = Interest.where('name LIKE ?', "%#{term}%") if term 

    @names = [] 

    @interests.each do |i| 
     @names.push(i.name) 
    end 

    respond_to do |format| 
     format.js {} 
     format.json {render json: @names} 
    end 
end

这是我的看法（使用tagsInput jQuery插件）：

$('.ajax-autocomplete').tagsInput({ 
    autocomplete_url: "/users-interests-search?term=" + $('.ajax-autocomplete').val() 
    });

来源

2017-01-25 08:26:57

添加自动完成功能，导轨与selectize.js

回答

相关问题