At the moment, its only possible to have 6 options displayed in the dropdown container. Could you implement the functionality to scroll over the options if there are more than 6 matching options?

how can I get the value of the selected option

I need to selected the default value.
So It can use this by adding new prop and watch function.

    props: {
...
      defaultValue: {
        type: Object,
        required: false,
        default: undefined,
        note: 'Default Selected'
      }
...
    watch: {
...
      defaultValue(v) {
        if (!v || !v.id) return;
        this.selectOption(v);
      }

I changed the max item to 10, still dropdown list has 6 elements. I also try to alter the parameter from "Dropdown.vue." It did not work as well.

Thanks

Changed the parameters in "vue-simple-search-dropdown.min.js" and it worked.

I got a problem which I've also tested on https://romainsimon.github.io/vue-simple-search-dropdown/

When you select an entry with left clicking your mouse, "X has been selected" is printed twice. Therefore I assume that (for whatever reason) the select event is emitted twice. Is there an easy fix for that?

Is there also a option with filtering but not filtering out elements from UI only selecting the found element in dropdown ?

Case

when clicking tab on previous input then typing, the dropdown list not showing

I really need v-model prop

PR requested #3

Originally posted by @DeVoresyah in #2 (comment)

I'm unable to remove selected value of that dropdown. i.e. which is visible in that input type.

Use

<Dropdown :options="[{id:1,name:'ab'},{id:2,name:'a'}]"></Dropdown>

Now try to select the second option, 'a'. Your choice of 'a' will not appear as value, but 'ab' will be shown instead.

if you use in dropdown list a name that have symbol: + is impossible to selected it.
Same problem if you use symbol ( and )

The problem is in: node_modules/vue-simple-search-dropdown/dist/vue-simple-search-dropdown.js

Line: 165

for now i fix writing something like that:

var r = new RegExp(this.searchFilter.replace("+", "").replace("(", "").replace(")", ""), "ig");

But is just a workaround.

I also changed method selectOption:

methods: {
                    selectOption: function t(e) {
                        this.selected = e;
                        this.optionsShown = false;
                        this.searchFilter = this.selected.name;
                        //console.log(this.selected);
                        //console.log(this.searchFilter   );
                        //console.log(this.selected.name.replace("(", "").replace(")", ""));
                        this.selected.name = this.selected.name.replace("(", "").replace(")", "");
                        this.$emit("selected", this.selected);
                    },

In this way element don't show error and are selectable.

Please fix it.

I need to establish a position, obtained by database id.

Say I have a dropdown list with lots of potential values. If those values exist immediately (I am referencing a JSON file for options and not using an API at this time).

Anyway, when I click into the search box, the dropdown opens with the default first 6 values.

If I set :maxItem="0", while I get the desired result of no dropdown on initial click, however, I can never return any values.

Is there a recommended option or will there need to be an enhancement to hide values until they are searched? It seems silly, but I suppose you could hook into the v-on:filter values and dynamically flip it from 0 to 6 or whatever, but this seems cumbersome.

Hello, I'm getting the error Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c') at Proxy.n (:3001/js/webpack:/node_modules/vue-simple-search-dropdown/dist/vue-simple-search-dropdown.js:1) not sure if it's because I'm on Vue3? Here are the versions I think that might be related to this issue: "vue": "3.0.0", "vue-router": "^4.0.0-0", "vuex": "^4.0.0-0", "vue-simple-search-dropdown": "^1.0.1", Any suggestion is greatly appreciated!

First of all thank you very much for this module, it's nearly exactly what i was looking for.

The only option I am actually missing is an option-parameter which allows to make an initial setting in the drop-down.
Use Case: The very first time you use the module you want to make a setting.
But if you like to use the dropdown for an update, I actually see no way to pass forward the "selected" id which was set initially.
(e.g. book categories, the first time you select 'suspense' but then want to change it to 'drama'. So if you want to load the select with the initial category, I see actually no way to tell the module to have entry with id=x preselected)

Thx

oh a PD: what is the behaviour if I type some string which is not included in the options? which is the value of the option in that case? 'empty', '' or 'undefined'?
or put in other word, how can I validate that the selected value exists?

Vue.use is not a function is the error that's thrown in the demo, which makes it not work.

Maybe it's an idea to interact with the up- and downkeys once the component is selected?

Hi Romain,

I'm trying to implement your search plugin and have got the list from my GraphQL edges and the selection working, but I'm having a hard time figuring out how to submit the form on selection. I'm using Gridsome for the site and tried adding a method that uses route.push, but not having much luck. Any ideas?

I added a simplified version of my code here:
https://gist.github.com/smokeyfro/ddd97bac76fafac1a9c90f5c0c744bac

TIA,
Chris

Hello,

How I can initialize the options field with data returned from Ajax Request ?

Many thanks

Fabrice

Hi
Will it be possible to use the list, but if user have another input not on the list, to keep this input in field? Something like "not restricted to list".

Christian