Hi I don’t understand what the meaning of the error is in the web console.

Uncaught TypeError: r.getClientRects is not a function jquery.min.js:2

I am trying to build an autocomplete search form in laravel Based on a bootstrap theme i downloaded.

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

<link href=".min.css" 
rel="stylesheet">
<link href=".min.css" 
rel="stylesheet">
<link href="+Round" 
rel="stylesheet">
<link href=" 
rel="stylesheet">
<link href=".min.css" rel="stylesheet">
<script src='.js'></script>
<script src=".min.js"></script>
<script 
src=".bundle.min.js"> . 
</script>
<script src=" 
easing/jquery.easing.min.js"></script>
<script src=".min.js"></script>

My form:

 <form class="form-inline d-flex">


            <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...">

                       <button type="submit" class="btn btn-primary mx-auto">Search</button>
             <div class="col-xs-4 g-recaptcha" data-sitekey="6Lf9mW4UAAAAACtNJIuXY9VlCZ5kg0Ys7Y3ancH_"></div>   

</form>

My Javascript:

$(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: "",
                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);

       }
   });

Hi I don’t understand what the meaning of the error is in the web console.

Uncaught TypeError: r.getClientRects is not a function jquery.min.js:2

I am trying to build an autocomplete search form in laravel Based on a bootstrap theme i downloaded.

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

<link href="http://myurl.com/vendor/bootstrap/css/bootstrap.min.css" 
rel="stylesheet">
<link href="http://myurl.com/vendor/fontawesome-free/css/all.min.css" 
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" 
rel="stylesheet">
<link href="https://fonts.googleapis.com/css 
rel="stylesheet">
<link href="http://myurl.com/css/grayscale.min.css" rel="stylesheet">
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="http://myurl.com/vendor/jquery/jquery.min.js"></script>
<script 
src="http://myurl.com/vendor/bootstrap/js/bootstrap.bundle.min.js"> . 
</script>
<script src="http://myurl.com/vendor/jquery- 
easing/jquery.easing.min.js"></script>
<script src="http://myurl.com/js/grayscale.min.js"></script>

My form:

 <form class="form-inline d-flex">


            <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...">

                       <button type="submit" class="btn btn-primary mx-auto">Search</button>
             <div class="col-xs-4 g-recaptcha" data-sitekey="6Lf9mW4UAAAAACtNJIuXY9VlCZ5kg0Ys7Y3ancH_"></div>   

</form>

My Javascript:

$(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);

       }
   });

• javascript
• jquery

• GREAT thats was the issue! – Screwtape007 Commented Feb 16, 2019 at 20:16
• How do i vote your answer up - im a newbie – Screwtape007 Commented Feb 16, 2019 at 20:17

2 Answers 2

The problem is likely due to using jQuery 3.1. Try to add :

<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>

If you don't want to downgrade jquery then I found this fix which works: https://github.com/markdalgleish/stellar.js/pull/147/commits/2051858ab77eaec82abe5b287d740dcfbb3e7605#diff-5e6a197fd748dcc5d0c34558b8ecde5f6c61bccea987386d5f1844cfe3eb2162

If you have only jquery.stellar.min.js file you can find and replace these functions (minified):

refresh:function(c){var d=this,e=d._getScrollLeft(),f=d._getScrollTop();c&&c.firstLoad||this._reset(),this._setScrollLeft(0),this._setScrollTop(0),this._setOffsets(),this._findParticles(),this._findBackgrounds(),c&&c.firstLoad&&/WebKit/.test(navigator.userAgent)&&a(b).load(function(){var a=d._getScrollLeft(),b=d._getScrollTop();d._setScrollLeft(a+1),d._setScrollTop(b+1),d._setScrollLeft(a),d._setScrollTop(b)}),this._setScrollLeft(e),this._setScrollTop(f)},_detectViewport:function(){var a=this.$viewportElement.offset(),b=null!==a&&a!==d;this.viewportWidth=this.$viewportElement.width(),this.viewportHeight=this.$viewportElement.height(),this.viewportOffsetTop=b?a.top:0,this.viewportOffsetLeft=b?a.left:0},

for these:

refresh: function (c) {
        var d = this,
            e = d._getScrollLeft(),
            f = d._getScrollTop();
        (c && c.firstLoad) || this._reset(),
            this._setScrollLeft(0),
            this._setScrollTop(0),
            this._setOffsets(),
            this._findParticles(),
            this._findBackgrounds(),
            c &&
                c.firstLoad &&
                /WebKit/.test(navigator.userAgent) &&
                a(b).on("load", function () {
                    var a = d._getScrollLeft(),
                        b = d._getScrollTop();
                    d._setScrollLeft(a + 1),
                        d._setScrollTop(b + 1),
                        d._setScrollLeft(a),
                        d._setScrollTop(b);
                }),
            this._setScrollLeft(e),
            this._setScrollTop(f);
    },
    _detectViewport: function () {
        var a =
                this.$viewportElement[0] !== window
                    ? this.$viewportElement.offset()
                    : { top: 0, left: 0 },
            b = null !== a && a !== d;
        (this.viewportWidth = this.$viewportElement.width()),
            (this.viewportHeight = this.$viewportElement.height()),
            (this.viewportOffsetTop = b ? a.top : 0),
            (this.viewportOffsetLeft = b ? a.left : 0);
    },