Q-Select Autocomplete on object



  • I am having difficulties to make autocomplete work on dynamic object.
    my Select looks like this :

    <q-select
                label="Part Number"
                stack-label
                :value="items[data.key].partNo"
                :options="partNo"
                option-value="partNo"
                option-label="partNo"
                use-input
                outlined
                dense
                options-dense
                @filter="filterFn"
              />
    

    And I have an Array with objects that looks like:

    {
    partNo: '123456',
    orgName: 'xxxx',
    partDesc: 'xxx' 
    },
    {
    partNo: '143566',
    orgName: 'xxxx',
    partDesc: 'xxx' 
    }
    .
    .
    .
    

    obviously function from example wont work:

        filterFn(val, update, abort) {
          console.log(val)
          update(() => {
            const needle = val.toLowerCase()
              this.partNo = this.partNo.filter(
                v => v.toLowerCase().indexOf(needle) > -1
              )
          })
        }
    

    anyone have some nice ideas for that problem ?



  • @Uneasy pls produce a working reproduction codepen.



  • I did actually figured it out using lodash.
    I had to create separate data called options or something and assign that to select options
    here is my filtering function

    filterFn(val, update, abort) {
          console.log(val)
          update(() => {
            const needle = val.toLowerCase()
              this.partsOptions = _.filter(this.partNo,function(o){
                return o.partNo.val.toLowerCase().indexOf(needle)>-1
              })
          })
        }
    

Log in to reply