No More Posting New Topics!

vijay

@metalsadman yayyy!!! It worked.

I targeted the inner Input tag element and passed it in the request to Google. Voila its working!!! Now I can make it work alongside with q-select tag too. Thankyou very much. Damn QUASAR is simply WOW!!!

vijay

@metalsadman yayyy!!! It worked.

I targeted the inner Input tag element and passed it in the request to Google. Voila its working!!! Now I can make it work alongside with q-select tag too. Thankyou very much. Damn QUASAR is simply WOW!!!

vijay

Hey everyone,

I have to implement autocomplete feature to my address form. Whenever user types in the name field,

Need to check if the data is already available from my DB. If so I need to use the Q-Select to show the available addresses(completed this). Please refer below.
If NO DATA returned from API, I need to call Google API to get the address location which user has typed. Please refer below.

Since Google maps API primarily uses the <input> tag for showing the results, its giving me the following error since I am trying to achieve this in Q-select tag.

I need to have both this feature in a single input field.

If someone has any thoughts / ideas on this, please let me know. Thanks!

vijay

Hi, I am trying to apply animations/transitions in the q-table using the transition-group. It’s not working as expected. While adding a new row to the table, animation should be applied.
Can someone let me know what I am missing here?

<transition-group appear enter-active-class="animated fadeIn">
                <q-table
                  class="q-mt-md"
                  :dense="$q.screen.lt.md"
                  title="Test"
                  :data="data"
                  :columns="columns"
                  hide-bottom
                  :pagination="pagination"
                  row-key="index"
                  key="index"
                >
</transition-group>

I have enabled this in quasar.config.js too. { animations: ‘all’ }

CDN Example

vijay

Hi!!! I have a users object, in that I am trying to update a specific node(status) by using the firebase update(payload) method. But when I try to do that, instead of updating the value in the parent node, it creates a new child node(duplicate node) with the value being updated there.

let firebaseApp = firebase.initializeApp(firebaseConfig);
let uniqueID = "OEHCrSnKFrd87JDivvA0sLMnj8u1"
firebaseApp.database()ref("users/" + uniqueID).update({
    status: false
  })

Can someone please let me know what I am missing here?

vijay

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

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.

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>

No More Posting New Topics!

vijay

@vijay

Best posts made by vijay

Latest posts made by vijay