title: Why is the data from the database not displayed in the select through ajax?
body: <p>Good evening, I'm sorry, this text was translated through google translator
  I'm not very good at parsing javascript, when I copy this code from the documentation, the data is successfully loaded and displayed</p>
  <pre><code>$(&quot;#select-repo&quot;).selectize({
    valueField: &quot;url&quot;,
    labelField: &quot;name&quot;,
    searchField: &quot;name&quot;,
    create: false,
    render: {
      option: function (item, escape) {
        return (
          &quot;&lt;div&gt;&quot; +
          '&lt;span class=&quot;title&quot;&gt;' +
          '&lt;span class=&quot;name&quot;&gt;&lt;i class=&quot;icon ' +
          (item.fork ? &quot;fork&quot; : &quot;source&quot;) +
          '&quot;&gt;&lt;/i&gt;' +
          escape(item.name) +
          &quot;&lt;/span&gt;&quot; +
          '&lt;span class=&quot;by&quot;&gt;' +
          escape(item.username) +
          &quot;&lt;/span&gt;&quot; +
          &quot;&lt;/span&gt;&quot; +
          '&lt;span class=&quot;description&quot;&gt;' +
          escape(item.description) +
          &quot;&lt;/span&gt;&quot; +
          '&lt;ul class=&quot;meta&quot;&gt;' +
          (item.language ? '&lt;li class=&quot;language&quot;&gt;' + escape(item.language) + &quot;&lt;/li&gt;&quot; : &quot;&quot;) +
          '&lt;li class=&quot;watchers&quot;&gt;&lt;span&gt;' +
          escape(item.watchers) +
          &quot;&lt;/span&gt; watchers&lt;/li&gt;&quot; +
          '&lt;li class=&quot;forks&quot;&gt;&lt;span&gt;' +
          escape(item.forks) +
          &quot;&lt;/span&gt; forks&lt;/li&gt;&quot; +
          '&lt;li class=&quot;stars&quot;&gt;&lt;span&gt;' +
          escape(item.followers) +
          &quot;&lt;/span&gt; stars&lt;/li&gt;&quot; +
          &quot;&lt;/ul&gt;&quot; +
          &quot;&lt;/div&gt;&quot;
        );
      },
    },
    score: function (search) {
      var score = this.getScoreFunction(search);
      return function (item) {
        return score(item) * (1 + Math.min(item.watchers / 100, 1));
      };
    },
    load: function (query, callback) {
      if (!query.length) return callback();
      $.ajax({
        url: &quot;https://api.github.com/legacy/repos/search/&quot; + encodeURIComponent(query),
        type: &quot;GET&quot;,
        error: function () {
          callback();
        },
        success: function (res) {
          callback(res.repositories.slice(0, 10));
        },
      });
    },
  });
  </code></pre>
  <p>But as soon as I change the data to my own, my code stops working</p>
  <pre><code>$(&quot;.add-items-select&quot;).selectize({
      valueField: &quot;id&quot;,
      labelField: &quot;name&quot;,
      // searchField: &quot;name&quot;,
      create: true,
      render: {
        option: function (item, escape) {
          return &quot;&lt;div&gt;&quot; + '&lt;span class=&quot;title&quot;&gt;' + escape(item.id) + &quot;&lt;/span&gt;&quot; + &quot;&lt;/div&gt;&quot;;
        },
      },
      load: function (query, callback) {
        if (!query.length) return callback();
        $.ajax({
          url: &quot;http://127.0.0.1:8000/warehouse/api/products/&quot; + encodeURIComponent(query)+ &quot;/?format=json&quot;,
          type: &quot;GET&quot;,
          error: function () {
            callback();
          },
          success: function (res) {
            callback(res);
            callback(console.log(res));
          },
        });
      },
    });
  </code></pre>
  <p>Data is displayed in the console, but the render function does not work
  Here is my json</p>
  <pre><code>{&quot;id&quot;:1,&quot;company_detail&quot;:{&quot;id&quot;:1,&quot;name&quot;:&quot;test&quot;,&quot;adress&quot;:null},&quot;articul&quot;:&quot;1&quot;,&quot;name&quot;:&quot;teyit&quot;,&quot;category_detail&quot;:null,&quot;stock&quot;:0,&quot;sell_price&quot;:&quot;123.00&quot;,&quot;last_buy_price&quot;:&quot;1.00&quot;,&quot;archived&quot;:false}
  </code></pre>