How to block the data filling in Q-select Autocomplete while scrolling thru the available items?



  • I have a address component in which NAME should has both input and auto-complete type(so that the user can select / type in the address)…The address I am showing in the drop-down will be of formatted type. Is there a way to block the data filling in the input field while scrolling thru the available address items.

    Screenshot_1.png

    <html>
    
    <head>
      <link href="https://cdn.jsdelivr.net/npm/quasar@1.14.3/dist/quasar.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
      <!-- Add the following at the end of your body tag -->
    
      <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/quasar@1.14.3/dist/quasar.umd.js"></script>
    
    
      <div id="q-app">
        <div class="row justify-around q-mt-lg">
          <div class="col-5">
            <label for="name" class="q-mt-md">Name</label>
            <q-select class="q-pa-md-none" v-model="CompanyName" :key="addressKey" dense use-input fill-input outlined
              hide-selected hide-dropdown-icon input-debounce="0" :options="AddressDetailsData" option-value="name"
              option-label="value" emit-value @filter="filterAddress" @input-value="setCompanyName" @input="AddressChange">
            </q-select>
            <label for="Street" class="q-mt-md">Street</label>
            <q-input dense outlined v-model="Street"></q-input>
    
            <label for="City" class="q-mt-md">City</label>
            <q-input dense outlined v-model="City"></q-input>
    
            <label for="State" class="q-mt-md">State</label>
            <q-input dense outlined v-model="State"></q-input>
    
            <label for="zipcode" class="q-mt-md">Zipcode</label>
            <q-input dense outlined v-model="ZipCode"></q-input>
          </div>
        </div>
      </div>
    </body>
    <script>
      new Vue({
        el: '#q-app',
        data: function () {
          return {
            CompanyName: "",
            addressKey: "",
            State: "",
            City: "",
            Street: "",
            ZipCode: "",
            AddressDetailsData: [],
            AddressDetails: [
              {
                Name: "Name 1",
                State: "State 1",
                City: "City 1",
                Street: "Street 1",
                ZipCode: "ZipCode 1"
              },
              {
                Name: "Name 2",
                State: "State 2",
                City: "City 2",
                Street: "Street 2",
                ZipCode: "ZipCode 2"
              },
              {
                Name: "Name 3",
                State: "State 3",
                City: "City 3",
                Street: "Street 3",
                ZipCode: "ZipCode 3"
              },
            ]
          }
        },
        methods: {
          filterAddress(val, update, abort) {
            if (val.length < 3) {
              abort();
              return;
            }
            update(() => {
              const itemValue = val.toLowerCase();
              this.AddressDetailsData = [];
              this.AddressDetails.forEach(item => {
                if (item && Object.values(item).toLocaleString().toLocaleLowerCase().includes(itemValue)) {
                  let itemDesc = item.Name.bold() + "<br/>" + item.Street + "<br/>"
                    + item.City + ',' + item.State + ' ' + item.ZipCode + ' ';
                  this.AddressDetailsData.push(
                    { name: JSON.stringify(item), value: itemDesc }
                  )
                }
              });
            }
            )
          },
          setCompanyName(value) {
            if (value.includes('<br/>')) {
              this.AddressDetailsData.forEach(row => {
                if (row.value === value) {
                  this.$forceUpdate(); //forcing to rerender to update values
                  this.CompanyName = (JSON.parse(row.name)).Name;
                  return;
                }
              })
            } else {
              this.CompanyName = value;
            }
          },
          AddressChange(item) {
            this.addressKey = item;
            let addressitem = JSON.parse(item);
            this.CompanyName = addressitem.Name;
            this.Street = addressitem.Street;
            this.City = addressitem.City;
            this.State = addressitem.State;
            this.Street = addressitem.Street;
            this.ZipCode = addressitem.ZipCode;
          }
        },
        created() {
          console.log(this.AddressDetailsData);
        }
      })
    </script>
    
    </html>
    


  • @vijay

    maybe hide-selected could be useful:

    From Q-select API Description
    Hides selection; Use the underlying input tag to hold the label (instead of showing it to the right of the input) of the selected option; Only works for non ‘multiple’ Selects.



  • @dobbel

    Thank you for your response. Yes I have used hide-selected in the above code and it works for the input we type in. Is there a way to hide the input filling while scrolling thru the suggested list items? In this case I wont be using the ‘multiple select’ type.



  • @vijay

    The problem is you create your own html options that show as weird html string in the q-select input.

    Instead of creating html options you could use the option slot of the q-select to customize the format/display of your options in q-select, like this:

    https://quasar.dev/vue-components/select#Customizing-menu-options

    https://quasar.dev/vue-components/select#Example--Object-options



  • @dobbel Thank you so much. I changed this to ‘options’ type and its working splendid 🙂


Log in to reply