Filtering without adding the menu



  • Hello,

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

    Screenshot 2021-01-11 015723.png

    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.

    Screenshot 2021-01-11 021840.png

    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>
    
    


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



  • 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.



  • @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



  • 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.



  • 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.





  • 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.



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


Log in to reply