Select component - autocomplete example and IE11



  • In the Quasar documentation for Select component (“Filtering and Automplete”), the following script is shown:

        filterFn(val, update, abort) {
            if (val.length < 2) {
                abort()
                return
            }
    
            update(() => {
                const needle = val.toLowerCase()
                this.options = stringOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)
            })
        },
    

    If the documentation page is viewed in IE11 - the example works fine.

    However, if I implement the same piece of code in my UMD app, I get a few javascript errors (probably because it’s not ES 5.0 compliant).

    Why is the example code working in IE, when it’s not ES5? And what needs to be changed to make it work?

    Should the filterFN be changed to this:

        filterFn: function(val, update, abort) {
            if (val.length < 2) {
                abort()
                return
            }
    

    But whas should the Update function be changed to then?



  • You’ll need to add polyfills manually for umd https://quasar.dev/start/umd#Installation see the one about ie support



  • I already have Polyfill added. Quasar seems to run - but the JS code that implements same logic as in the example fails.

    This page: http://kunde.botjek.dk/webshopdev/

    If I comment out (from my main.js) this, everything works:

     update(() => {
            this.order.propertyAddress = val.toLowerCase()
            if (!updateSelect(this.order.propertyAddress, this.order.propertyData != null ? this.order.propertyData.type : "")) {
                this.order.propertyData.data = null
            }
        })
    

    With above not commented out, JS fails:

    http://kunde.botjek.dk/webshopdev/index2.html



  • This post is deleted!


  • @metalsadman

    With polyfill included at the right position, example code still fails. If this part (from Quasar documentation) is in my JS:

       filterFn(val, update, abort) {
            if (val.length < 2) {
                abort()
                return
            }
            update(() => {
                const needle = val.toLowerCase()
                this.options = stringOptions.filter(v => v.toLowerCase().indexOf(needle) > -1)
            })
        }
    

    The IE console gives this error message (Char “:” expected):

    6d1f3c8c-0344-403b-be76-63a3cd44392a-image.png

    At this position:

    1182ee47-7f19-4d08-9c75-cab29b524b3c-image.png



  • Seems like putting this manually through Babel:

         update(() => {
                this.order.propertyAddress = val.toLowerCase()
                if (!updateSelect(this.order.propertyAddress, this.order.propertyData != null ? this.order.propertyData.type : "")) {
                    this.order.propertyData.data = null
                }
            })
    

    Resulting in this:

            update(function () {
                _this.order.propertyAddress = val.toLowerCase();
    
                if (!updateSelect(_this.order.propertyAddress, _this.order.propertyData != null ? _this.order.propertyData.type : "")) {
                    _this.order.propertyData.data = null;
                }
            })
    

    Made the trick…


Log in to reply