Categories
Quasar

Developing Vue Apps with the Quasar Library — Filtering and Autocomplete

Spread the love

Quasar is a popular Vue UI library for developing good looking Vue apps.

In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.

Filtering and Autocomplete

We can add an autocomplete with the q-select component.

For example, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <div class="q-pa-md">
          <q-select
            filled
            v-model="model"
            use-input
            input-debounce="0"
            label="Simple filter"
            :options="options"
            @filter="filterFn"
          >
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  No results
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
      </q-layout>
    </div>
    <script>
      const stringOptions = ["apple", "orange", "grape"];

      new Vue({
        el: "#q-app",
        data: {
          options: [],
          model: []
        },
        methods: {
          filterFn(val, update) {
            if (val === "") {
              update(() => {
                this.options = stringOptions;
              });
              return;
            }

            update(() => {
              const needle = val.toLowerCase();
              this.options = stringOptions.filter((v) =>
                v.toLowerCase().includes(needle)
              );
            });
          }
        }
      });
    </script>
  </body>
</html>

We add the q-select component with the use-input options to let users enter values into the dropdown.

And we add the @filter directive to listen for inputs from the user.

filterFn has the val parameter which has the inputted value.

update is a function that lets us update the options when we type something into the input box.

The no-option slot lets us show something when no options are found.

To add an autocomplete input, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <div class="q-pa-md">
          <q-select
            filled
            :value="model"
            use-input
            hide-selected
            fill-input
            input-debounce="0"
            :options="options"
            @filter="filterFn"
            @input-value="setModel"
            hint="Text autocomplete"
          >
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  No results
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
      </q-layout>
    </div>
    <script>
      const stringOptions = ["apple", "orange", "grape"];

      new Vue({
        el: "#q-app",
        data: {
          options: [],
          model: []
        },
        methods: {
          filterFn(val, update) {
            if (val === "") {
              update(() => {
                this.options = stringOptions;
              });
              return;
            }

            update(() => {
              const needle = val.toLowerCase();
              this.options = stringOptions.filter((v) =>
                v.toLowerCase().includes(needle)
              );
            });
          },
          setModel(val) {
            this.model = val;
          }
        }
      });
    </script>
  </body>
</html>

We keep the use-input prop and @filterFn directives the same.

And we add the fill-input prop to enable the autocomplete.

We separate the v-model directive into the @input-value directive and the value prop.

We listen to the input-value event to get the inputted value and set it as the value of the model reactive property.

And we set the value to the model reactive property to set the inputted value.

Conclusion

We can add filtering and autocomplete dropdowns into our Vue app with the Quasar library.

Leave a Reply

Your email address will not be published. Required fields are marked *