title: Uncaught TypeError: Cannot read property 'length' of undefined on autocomplete
body: <p>I am trying to make auto complete using the <a href="http://jqueryui.com/autocomplete/#remote-jsonp" rel="nofollow noreferrer">example</a></p>
  
  <p>for that i am using code </p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;JSP Page&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /&gt;
      &lt;script src="js/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery-ui.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
          $(function() {
              function log(message) {
                  $("&lt;div&gt;").text(message).prependTo("#log");
                  $("#log").scrollTop(0);
              }
  
              $("#productName").autocomplete({
                  source: function(request, response) {
                      alert('hiiiii');
                      $.ajax({
                          url: "ajaxProduct",
                          dataType: "json",
                          data: {
                              qry: $("#productName").val(),
                              maxRows: 5
                          },
                          success: function(data) {
                              alert('success');
                              alert(data.productList);
  
                              response($.map(data.productList, function(item) {
                                  alert(data.productList);
                                  console.log(item);
                                  return {
                                      label: item.productName,
                                      value: item.productName,
                                      id: item.productId
                                  }
                              }));
                          },
                          error: function(data) {
                              alert(data.productList);
                              console.log(typeof data);
                              console.log(data);
                              alert('error');
                          }
                      });
                  },
                  minLength: 1,
                  select: function(event, ui) {
                      log(ui.item ?
                      "Selected: " + ui.item.label :
                      "Nothing selected, input was " + this.value);
                      $("#productId").val(ui.item.id)
                  },
                  open: function() {
                      $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                  },
                  close: function() {
                      $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                  }
              });
          });
  
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  Product Id &lt;span id="productId"&gt;&lt;/span&gt;&lt;br&gt;
  Product Name &lt;input type="text" name="productName" id="productName"/&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>It is showing <code>alert('hii');</code>,<code>alert('success');</code>, then in alert box showing <code>undefined</code>.<br>
  On console.log it is showing</p>
  
  <pre><code>event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
  Uncaught TypeError: Cannot read property 'length' of undefined jquery-1.9.1.js:766
  Denying load of chrome-extension://flhdcaebggmmpnnaljiajhihdfconkbj/jquery-2.0.2.min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension. (index):1
  </code></pre>
  
  <p>Jquery:766 is</p>
  
  <pre><code> arg is for internal usage only
      map: function( elems, callback, arg ) {
          var value,
              i = 0,
              length = elems.length,//766 line number
              isArray = isArraylike( elems ),
              ret = [];
  </code></pre>
  
  <p>How to resolve this.</p>