title: jQuery almost winning me - UI Autocomplete " data undefined"
body: <p>jQuery is almost winning me. I already saw lots and lots in StackOverflow answers and I can't find a solution to my problem. </p>
  
  <p>I'm using jQuery UI Autocomplete in my project, and I need render a default message if no results is returned. <strong>I'm using "_renderItem", as you can see bellow.</strong></p>
  
  <pre><code>var autocompleteDir = $("#search");
  
  autocompleteDir.autocomplete({
      source: function (request, response) {
          populate(request.term, response);
  
          result = $.ui.autocomplete.filter(result, request.term)
  
          var item = {};
          item.type = 'loading';
          item.label = "Loading..";
          item.value = "";
  
          result.unshift(item)
  
          response(result.slice(0, 10));
      }
  });
  
  autocompleteDir.data("ui-autocomplete")._renderItem = function (ul, item) {
      if (item.type === "loading") {
          return $('&lt;li&gt;&lt;/li&gt;')
              .data("ui-autocomplete-item", item)
              .append("&lt;div style='text-align: center;'&gt;" + item.label + "&lt;/div&gt;")
              .appendTo(ul);
      }
  };
  </code></pre>
  
  <h2>And here's what I'm getting on the console:</h2>
  
  <pre><code>Uncaught TypeError: Cannot read property 'type' of null
  Uncaught TypeError: Cannot call method 'data' of undefined 
  </code></pre>
  
  <p>I'm using jQuery 1.10.2 and jQuery UI 1.10.3. Someone have a good idea?</p>
  
  <h2>Edit 1:</h2>
  
  <p>If I use this before "source":</p>
  
  <pre><code>response: function(event, ui){ 
                      if (ui.item.type === "loading"){
                          ui.content.push({label:"Loading",value:"Loading"})
                      }
  
                  } 
  </code></pre>
  
  <p>I have the following error:</p>
  
  <pre><code>Cannot read property 'type' of undefined 
  </code></pre>
  
  <p>If you help me solve this problem, can I use "response" to format and style my "loading" and my "none" result?   </p>
  
  <h2>Edit 2</h2>
  
  <pre><code>var populate = function(term, response) {
          $.getJSON(
              '&lt;%= my_rails_path %&gt;.json',
              {search: term},
              function(json) {
                    var result = [];
                    $.each(json, function(key, value) {
                      var item = {};
                      item.type = '';
                      item.label = value.name;
                      item.value = value.name;
                      result.push(item);
                    })
  
                    if (result.length == 0) {
                      var item = {};
                      item.type = "noResult";
                      item.label = "Create '" + term + "'"; 
                      item.value = term;
                      result.push(item)
                    }
  
                    response(result);
              }
          );  
  };
  </code></pre>
  
  <h2>Edit 3</h2>
  
  <p>Now the problem is solved, but the label is literally showed, but I want that be rendered. See the code, you'll understand:</p>
  
  <pre><code> response: function(event, ui){ 
            for(var i in ui.content){
              if (ui.content[i].type==="loading"){
                    ui.content[i] = {
                           label:"&lt;div style='text-align: center;'&gt;Loading&lt;/div&gt;",
                          value:""
                                     }
              }
            }
   }
  </code></pre>
  
  <p>Instead render "Loading" in the middle of the ui, all the string is showed to user (Loading).</p>