No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Q-Select Autocomplete on object

    Framework
    2
    3
    474
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • U
      Uneasy last edited by

      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 ?

      metalsadman 1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman @Uneasy last edited by

        @Uneasy pls produce a working reproduction codepen.

        1 Reply Last reply Reply Quote 0
        • U
          Uneasy last edited by Uneasy

          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
                    })
                })
              }
          
          1 Reply Last reply Reply Quote 0
          • First post
            Last post