title: Rails select2 ajax tags
body: <p>I'm using the select2 jquery gem. I'm trying to get the list of topics matching what the user types. It's not working as expected and i've spent all day trying to find out why. I keep getting this error in the console</p>
  
  <pre><code>Uncaught TypeError: Cannot call method 'toUpperCase' of undefined select2.js?body=1:363
  Uncaught TypeError: Cannot call method 'localeCompare' of undefined 
  </code></pre>
  
  <p>The second error links to the js file on this line </p>
  
  <pre><code>return this.text.localeCompare(term) === 0;
  </code></pre>
  
  <p>Is there something i'm doing wrong?
  Thanks in advance.</p>
  
  <p>My route:</p>
  
  <pre><code>get '/topic/topic_list' =&gt; 'topic#topic_list'
  </code></pre>
  
  <p>In my Topic controller i have:</p>
  
  <pre><code>def topic_list
      @topics = Topic.order(:name)
      respond_to do |format|
          format.html
          format.json { render json: @topics.where('name like ?', "%#{params[:q]}%") }
      end
  end
  </code></pre>
  
  <p>Topic js file </p>
  
  <pre><code>$(function () {
      $('#story_topic_list').select2({
          tags: true,
          width: '100%',
          tokenSeparators: [","," "],
          createSearchChoice: function(term, data) {
          if ($(data).filter(function() {
                return this.text.localeCompare(term) === 0;
              }).length === 0) {
                return {
                  id: term,
                  text: term
                };
              }
          },
          multiple: true,
          maximumSelectionSize: 5,
          formatSelectionTooBig: function (limit) {
              return 'You can only add 5 topics'
  
          },
          ajax: {
              dataType: 'json',
              url: '/topic/topic_list.json',
              data: function (term, page) {
                  return { q: term };
              },
              results: function(data, page) {
                  return { results: data };
              }
          }
      })
  });
  </code></pre>
  
  <p>In my form i have</p>
  
  <pre><code>&lt;%= f.label :topic_list %&gt;
  &lt;%= f.text_field :topic_list %&gt;
  </code></pre>
  
  <p>Also the /topic/topic_list.json returns this:</p>
  
  <pre><code>[{"id":2,"name":"app","added_by":null,"cover_id":null,"created_at":"2014-03-23T20:12:24.615+00:00","updated_at":"2014-03-23T20:12:24.615+00:00","count":1},{"id":5,"name":"app tech website","added_by":1,"cover_id":null,"created_at":"2014-03-23T20:23:33.754+00:00","updated_at":"2014-03-23T20:23:33.754+00:00","count":1},{"id":3,"name":"tech","added_by":null,"cover_id":null,"created_at":"2014-03-23T20:12:24.668+00:00","updated_at":"2014-03-23T20:12:24.668+00:00","count":1},{"id":4,"name":"website","added_by":null,"cover_id":null,"created_at":"2014-03-23T20:12:24.677+00:00","updated_at":"2014-03-23T20:12:24.677+00:00","count":1}]
  </code></pre>