Filtering without adding the menu

[pazarbasifatih]

Hello,

Filtering with/without adding the menu show the same behavior and add to the menu

The only way not to add to the menu remove the @new-value="createValue" property. But then it doesn’t reset the input value on its own using arrow keys and hitting enter. And doing so ruins the whole menu.

What’s the proper way of selecting a menu item by typing? Am i missing a configuration?

<template>
  <div class="q-pa-md">
    <q-select
      filled
      v-model="model"
      use-input
      use-chips
      multiple
      input-debounce="0"
      :options="filterOptions"
      @filter="filterFn"
      style="width: 250px"
    />
  </div>
</template>

<script>
const stringOptions = [
  'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
]

export default {
  data () {
    return {
      model: null,

      filterOptions: stringOptions
    }
  },

  methods: {
    createValue (val, done) {
      // Calling done(var) when new-value-mode is not set or "add", or done(var, "add") adds "var" content to the model
      // and it resets the input textbox to empty string
      // ----
      // Calling done(var) when new-value-mode is "add-unique", or done(var, "add-unique") adds "var" content to the model
      // only if is not already set
      // and it resets the input textbox to empty string
      // ----
      // Calling done(var) when new-value-mode is "toggle", or done(var, "toggle") toggles the model with "var" content
      // (adds to model if not already in the model, removes from model if already has it)
      // and it resets the input textbox to empty string
      // ----
      // If "var" content is undefined/null, then it doesn't tampers with the model
      // and only resets the input textbox to empty string

      if (val.length > 2) {
        if (!stringOptions.includes(val)) {
          done(val, 'add-unique')
        }
      }
    },

    filterFn (val, update) {
      update(() => {
        if (val === '') {
          this.filterOptions = stringOptions
        }
        else {
          const needle = val.toLowerCase()
          this.filterOptions = stringOptions.filter(
            v => v.toLowerCase().indexOf(needle) > -1
          )
        }
      })
    }
  }
}
</script>

[Ilia]

@pazarbasifatih Those are two different behaviours provided in the docs.
https://codepen.io/pikil/pen/MWjqoRe?editors=101 would this one work?

[pazarbasifatih]

Thank you for the reply @Ilia
That one wouldn’t work because it adds the typed value to the selected items,
But I’d like to
1- Select from the menu by typing,
2- Not add anything to the menu,
3- Reset the input textbox to empty string if matched value is selected.

I thought Filtering without adding the menu would do it.

[Ilia]

@pazarbasifatih Ah, OK, I think you might have looked at the wrong example then. Would that one work? I’ve generally taken that example and added a tiny modification: https://quasar.dev/vue-components/select#Filtering-and-autocomplete

https://codepen.io/pikil/pen/KKgxvMM?editors=1010

[pazarbasifatih]

Whoops, I missed a point in telling the exact behavior I wanted I am sorry my fault.

2- Not to add anything new to the menu,

So there will be multiple selections like Google, Facebook, Twitter.
I’ll be able to type and select from them.
Add each selected to the menu, but not be able to add anything else (like 123;498u;r13k)
Reset the input textbox such as deleting the input text face after selecting Facebook with arrow keys and enter.

[pazarbasifatih]

I have a list of languages and flags. I want the user to be able to select a bunch from the available languages by typing or scrolling because there are too many of them.
So adding languages that doesn’t exist is not an option. And I can’t force the user hit the backspace button the number of time they hit the keys to find the second language.

[metalsadman]

@pazarbasifatih https://codepen.io/metalsadman/pen/vYXzJyb?editors=1010

[pazarbasifatih]

Delicious, thank you a lot. I read through the API but this method didn’t appear to me at first sight. I thought that would have been the default behavior of the Filtering without adding the menu.
Thanks again.

[Ilia]

@pazarbasifatih No, sorry, that’s my bad Didn’t get that question right. Thanks @metalsadman !