romainsimon / vue-simple-search-dropdown Goto Github PK
View Code? Open in Web Editor NEW:eight_pointed_black_star: Vue.js simple autocomplete dropdown component
Home Page: https://romainsimon.github.io/vue-simple-search-dropdown/
:eight_pointed_black_star: Vue.js simple autocomplete dropdown component
Home Page: https://romainsimon.github.io/vue-simple-search-dropdown/
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.
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?
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!
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);
}
Is there also a option with filtering but not filtering out elements from UI only selecting the found element in dropdown ?
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
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.
when clicking tab on previous input then typing, the dropdown list not showing
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?
PR requested #3
Originally posted by @DeVoresyah in #2 (comment)
I really need v-model prop
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?
I'm unable to remove selected value of that dropdown. i.e. which is visible in that input type.
I need to establish a position, obtained by database id.
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
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.
Maybe it's an idea to interact with the up- and downkeys once the component is selected?
Hello,
How I can initialize the options field with data returned from Ajax Request ?
Many thanks
Fabrice
Vue.use is not a function
is the error that's thrown in the demo, which makes it not work.
how can I get the value of the selected option
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.