JSFiddle - React, Tailwind, and code Playground

by ph822720355

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.prod.js"></script>
<!--
Forked from:
https://quasar.dev/vue-components/select#example--text-autocomplete
-->
<div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md">
    <div class="q-gutter-md row">
      <q-select
        filled
        :model-value="model"
        use-input
        hide-selected
        fill-input
        input-debounce="0"
        :options="options"
        @filter="filterFn"
        @input-value="setModel"
        hint="Text autocomplete"
        style="width: 250px; padding-bottom: 32px"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey">
              No results
            </q-item-section>
          </q-item>
        </template>
      </q-select>
    </div>
  <div>{{ model }}</div>
  </div>
</div>

JavaScript

const { ref } = Vue

// const stringOptions = [
//   'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
// ].reduce((acc, opt) => {
//   for (let i = 1; i <= 5; i++) {
//     acc.push(opt + ' ' + i)
//   }
//   return acc
// }, [])

const stringOptions = [
  { label: '12346 / A1 / A1 Company', value: '123456'},
  { label: '45678 / B2 / B2 Company', value: '45678'}
]

const app = Vue.createApp({
  setup () {
    const model = ref(null)
    const options = ref(stringOptions)

    return {
      model,
      options,

      filterFn (val, update, abort) {
        update(() => {
          const needle = val.toLocaleLowerCase()
          options.value = stringOptions.filter(v => v.value.toLocaleLowerCase().indexOf(needle) > -1)
        })
      },
      

      setModel (val) {
        model.value = val
      }
    }
  }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')