jQuery-Tokeninput not displaying results from JSON results

Question

View

= text_field_tag :food_tokens

FoodsController

def search
  @foods = Food.where("name LIKE ?" , "%#{params[:q]}%")
  respond_to do |format|
    format.json { render json: @foods.as_json(only: [:id, :name]) }
  end
end

Routes

match '/search' => 'foods#search'

application.js

$(function() {
  $('#food_tokens').tokenInput('/search.json', { crossDomain: false }
});

Output from /search.json

[{"id":"5","name":"Apple"},{"id":"6","name":"Burger"}]

When I start typing 'Apple' into the text field, I get the "No results" message.

Any insights?

`$.get('/search.json`); returns this object. `Object {readyState: 1, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}` I left out a lot of of its content, but within it is this: `responseText: "[{"id":"5","name":"Apple"},{"id":"6","name":"Burger"}]"` — jamesfzhang, Mar 01 '13 at 01:47

score 0 · Answer 1 · answered Mar 01 '13 at 03:02

0

I think the problem was that you didn't closed the .tokenInput method properly, should be like this:

$(function() {
  $('#food_tokens').tokenInput('/search.json', { crossDomain: false });
});

answered Mar 01 '13 at 03:02

martriay

5,632
3
29
39

Sorry I just forgot to close `.tokenInput` in the OP. Out of frustration, I switched to using https://github.com/twitter/typeahead.js and have achieved success. I'll still keep the this tokeninput issue branch in case someone figures out what's wrong with the code. – jamesfzhang Mar 01 '13 at 03:44

score 0 · Answer 2 · edited May 23 '17 at 12:13

I think it is because of the capital letter. I had a similar problem and I changed the code slightly. First, I changed "name LIKE ?" for "name ILIKE ?" following this SO question's answer. Secondly, I changed the line 797 of jquery.tokeninput.js from this

if(input_box.val().toLowerCase() === query) {
   populate_dropdown(query, settings.jsonContainer ? results[settings.jsonContainer] : results);
}

to this

if(input_box.val() === query) {
  populate_dropdown(query, settings.jsonContainer ? results[settings.jsonContainer] : results);
}

jQuery-Tokeninput not displaying results from JSON results

2 Answers2