添加自動完成功能，導軌與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

回答

相關問題