2017-01-24 1 views
1

Прошло два дня, когда я сражаюсь по «простой» задаче. Добавление поля автозаполнения в форме на моем приложении rails.Добавить функцию автозаполнения для приложения rails с selectize.js

Я бегу рубин 2.3.3 и рельсы 5.0.1. До сих пор я перепробовал кучу разных вариантов, таких как: - Elasticsearch - Rails-JQuery-автозаполнения

Теперь я даю идти к 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 

И в моем сценарии, я использую следующее (взято из here используя пример rottenTomato):

$('.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 вернулась, на реальной странице не происходит многого.

Любое предложение по этому вопросу является очень желанным (или любой другой способ помочь автозаполнению системы в этом случае:)).

Cheers! Andrea

Update: Вот вывод на консоль после изменения АЯКС вызова (см выше)

Console screenshot

+0

Что вы видите в консоли браузера? Я предполагаю какую-то ошибку? Кажется, что ваш бэкэнд посылает массив интересов, но вы вызываете 'res.name', но не итерации. – Wukerplank

+0

Эй @Wukerplank - да, действительно, я должен перебирать массив, однако я все равно получаю такое же поведение, используя res [0] .name (которое при входе в консоль показывает данные, которые я ищу). –

+0

Добавляете ли вы результат, полученный в браузере? Возможно, его корень - это словарь, и вам нужно вызвать 'res ['interest'] [0] .name' – Wukerplank

ответ

0

В конце концов я выбрал для более легкого решения.

Это мой контроллер:

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() 
    }); 
Смежные вопросы