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>
