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

vijay

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.

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

dobbel

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

vijay

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

dobbel

@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

vijay

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

No More Posting New Topics!

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