title: Uncaught TypeError: r.getClientRects is not a function jquery.min.js:2
body: <p>Hi  I don’t understand what the meaning of the error is in the web console.</p>
  
  <pre><code>Uncaught TypeError: r.getClientRects is not a function jquery.min.js:2
  </code></pre>
  
  <p>I am trying to build an autocomplete search form in laravel Based on a bootstrap theme i downloaded.</p>
  
  <p>It works but the dropdown  is misaligned to the text box
  I suspect JQuery because of that error and the fact that  in a different bootstrap theme I had, it worked 
  I have  my script links as follows</p>
  
  <pre><code>&lt;link href="http://myurl.com/vendor/bootstrap/css/bootstrap.min.css" 
  rel="stylesheet"&gt;
  &lt;link href="http://myurl.com/vendor/fontawesome-free/css/all.min.css" 
  rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Varela+Round" 
  rel="stylesheet"&gt;
  &lt;link href="https://fonts.googleapis.com/css 
  rel="stylesheet"&gt;
  &lt;link href="http://myurl.com/css/grayscale.min.css" rel="stylesheet"&gt;
  &lt;script src='https://www.google.com/recaptcha/api.js'&gt;&lt;/script&gt;
  &lt;script src="http://myurl.com/vendor/jquery/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script 
  src="http://myurl.com/vendor/bootstrap/js/bootstrap.bundle.min.js"&gt; . 
  &lt;/script&gt;
  &lt;script src="http://myurl.com/vendor/jquery- 
  easing/jquery.easing.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://myurl.com/js/grayscale.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>My form:</p>
  
  <pre><code> &lt;form class="form-inline d-flex"&gt;
  
  
              &lt;input class="form-control autocomplete_txt input-lg flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" 
                     type='text' data-type="EmpService" id='EmpService_1' name='EmpService[]' autocomplete="off" placeholder="looking for..."&gt;
  
                         &lt;button type="submit" class="btn btn-primary mx-auto"&gt;Search&lt;/button&gt;
               &lt;div class="col-xs-4 g-recaptcha" data-sitekey="6Lf9mW4UAAAAACtNJIuXY9VlCZ5kg0Ys7Y3ancH_"&gt;&lt;/div&gt;   
  
  &lt;/form&gt;
  </code></pre>
  
  <p>My Javascript:</p>
  
  <pre><code>$(document).on('focus','.autocomplete_txt',function(){
    type = $(this).data('type');
  
    if(type =='EmpService' )autoType='EmployeeService'; 
  
  
  
     $(this).autocomplete({
         minLength: 0,
         source: function( request, response ) {
              $.ajax({
                  url: "http://spanibox.com/searchajax",
                  dataType: "json",
                  data: {
                      term : request.term,
                      type : type,
                  },
                  success: function(data) {
                      var array = $.map(data, function (item) {
                         return {
                             label: item[autoType],
                             value: item[autoType],
                             data : item
                         }
                     });
                      response(array)
                  }
              });
         },
         select: function( event, ui ) {
             var data = ui.item.data;           
             id_arr = $(this).attr('id');
             id = id_arr.split("_");
             elementId = id[id.length-1];
             $('#EmpService_'+elementId).val(data.name);
  
         }
     });
  </code></pre>