Quasar Multi select value component using Vuejs

I'm using Vuejs and Quasar on my project, I'm trying to do an autocomplete select to select some value, when the user tries to type some text, an API is sent to the server to retrieve. all the values contains that text, heres the code :

<template>

<div class="autocomplete">

<q-select

  filled

  label="Search"

  v-model="searchTerm"

  use-input

  use-chips

  multiple

  @filter="filterFn"

  @input-value="inputValue"

  @filter-abort="abortFilterFn"

  :options="searchResult"

  style="width: 395px"

  :option-label=""

    option-value="text"

   >

   <template v-slot:no-option>

    <q-item>

      <q-item-section class="text-grey"> No results </q-item-section>

    </q-item>

  </template>

</q-select>

<div>

  <back-button @click="go" data-test="btn-back" forwardicon="arrowright" />

</div>

<script>

import { defineComponent, ref, computed } from "vue";

import { apiProductService } from "../../models/";

import apiEndPoints from "../../models/api";

import BackButton from "../ui/";

 import { useRouter } from "vue-router";

 import { useSearchStore } from "../../store/";

 import _ from "lodash";

 import { debounce } from "quasar";

export default defineComponent({

  name: "search-bar",

components: { BackButton },



setup(props, context) {

const router = useRouter();

let searchTerm = ref(null);

let searchResult = ref([]);

const search = useSearchStore();



function filterFn(val, update, abort) {

  if (searchResult.value.length > 0) {

    update();

    return;

  }



  

  abortFilterFn();

   document.addEventListener('keypress', function(e) {

    
          true

        });

}

function abortFilterFn() {

  // console.log('delayed filter aborted')

}



const inputValue = computed(() => debounce(suggestions, 0).bind(this));



function suggestions(val) {

  if (val) {

    getSearchData(val);

    document.addEventListener('keypress', function(e) {

   true

  });

  } else {

    searchResult.value = [];

  }

}



const getSearchData = async (val) => {

  await apiProductService(

    apiEndPoints.GetSearchSuggestions.method,

    apiEndPoints.GetSearchSuggestions.url,

    {

      q: val,

      top: 5,

      suggester: "sg",

    }

  ).then((response) => {

    searchResult.value = response?.data?.suggestions || [];

  });

};



}

return {

  searchTerm,

  searchResult,

  filterFn,

  inputValue

  
  };

},

});

the problem with code is when I try to type for example the term "tes", I can see the data retrieved for the db, when I clic on the desired value, the type text is savec on the multi selected component like:

how can I remove the type text please ?

Quasar Multi select value component using Vuejs

1 Answers