paliari / v-autocomplete Goto Github PK
View Code? Open in Web Editor NEWAutocomplete component for Vue.js
Autocomplete component for Vue.js
@paliari Thanks for this plugin. one issue though, can you make the dropdown of filtered result overlay the content below the component instead of displacing them , like other select components behave
Hi,
I use your plugin to propose to visitors to choose a clothes brand. Everything work well if the visitor choose a brand in the list. But sometimes he does not find what he wants.
The problem is that the v-model don't returning the searchText value.
So, if the autocomplete don't return what the user want, the value he wrote must be saved.
How do you do that?
Thanks for your work.
When hovering over an item in the list the class is not set to active, meaning when styling the element you have to do something like:
.v-autocomplete .v-autocomplete-list .v-autocomplete-list-item:hover{ background-color:#a488a5; color:white; cursor: pointer; }
If you are hovering over an element with the mouse and then use the keyboard to navigate the list you end up with a :hover style and a style on the active element like so:
.v-autocomplete .v-autocomplete-list .v-autocomplete-list-item.v-autocomplete-item-active{ color:white; background-color:#a488a5; }
Resulting in it looking like two things are selected. I'd suggest making the class active on the element you are hovering over.
Equally happy to be show another way to do this.
Thanks
I'm having trouble figuring out how to use this with vuex...
I was trying to use the item-selected event:
file.vue
<template id="search-template">
<v-autocomplete
v-bind:items="items"
v-bind:min-len='2'
v-bind:get-label="getLabel"
v-bind:component-item="template"
v-model="selectedItem"
v-on:update-items="updateItems"
v-on:item-selected="setActiveCarInfo">
</v-autocomplete>
</template>
<script src="./file.js">
export default{
}
</script>
file.js
export default {
data () {
return {
selectedItem: [],
items: [],
template: TypeAhead,
}
},
components: {
'CarSearch': TypeAhead
},
methods: {
getLabel (item) {
return item.carName
},
updateItems (text) {
axios.get('http://somehost/api/car/lookup/' + text).then((response) => {
this.items = response.data
},
(error) => {
console.log(error)
})
},
...mapActions(['setActiveCarInfo']),
}
}
store.js (for vuex)
const state = {
initialArray: [],
activeVarInfo: null
}
const actions = {
setActiveCarInfo: (context,carId) => {
return axios.get('http://somehost:api/car/info/' + carId)
.then((response) => context.commit('SET_ACTIVE_CAR', response.data))
.catch((error) => context.commit('API_FAILURE', error))
}
}
// define the possible mutations that can be applied to our state
const mutations = {
SET_ACTIVE_CAR (activeCarInfo) {
console.log("Setting active car in state management")
state.activeCar = activeCarInfo
},
API_FAILURE(error){
console.log("In API Failure")
console.log(error)
}
}
const getters = {
activeCarInfo: state => state.activeCarInfo
}
// create the Vuex instance by combining the state and mutations objects
// then export the Vuex store for use by our components
export default new Vuex.Store({
state,
actions,
getters,
mutations
})
It looks like the SET_ACTIVE_CAR ends up with a payload for the entire list on the initial page load which is 5000+ items instead of the one I want.
How do I bind to a single selected item?
Thanks
My implementation works perfectly except for in Chrome and Firefox on an Android device (Pixel 2). The update-item event is triggered but that text argument is blank. I keep running into this issue even with a basic implementation removing all functionality outside of v-autocomplete. The only place I see it working as expected is within your DEMO. Have you run across this issue in the past? Thank you
Hi!
This really is a great component. But is there a way to use the keyboard when the list is displayed? instead of clicking, just selecting it with the arrow key
Thanks!
I'm using the Bulma CSS library and would like to be able to add a .input class to the inner input element of the autocomplete. Ideally, it would be great if v-autocomplete exposed a property that allowed a class to be added to the inner input element.
Thanks :)
when only one matched, it auto fill input field, i want not, can you make a switch?
I am trying to figure out what is wrong with the populating initial value. Whenever I navigate to the page with autocomplete, v-model/value should give the initial value for the input field. However, I am not seeing this behavior. I have put v-model="local_id"
where local_id is the initial text that is given to the component. I cannot see the initial value every time even though local_id has an initial value. Whenever I switch between pages and come back to Autocomplete page, it only gets the label sometimes.
When I checked, it looks like my get-label and item-selected don't run every time I go to the page.
hi all,
input-attrs is not working for ref, the ref attribute is not shown in input search
Hi,
If there is no match according to my search key then how could I show 'No Records Found' or something relevant to this.
Thanks.
Hi thanks a lot for this wonderful module :)
Is possible to add @keyup event on input search ?
<v-autocomplete :items="items" :get-label="getLabel" :component-item='template' :min-len="1"
:input-attrs="{ id: 'newTag', placeholder: 'Rechercher par mot clés' }" @update-items="updateItems" @keyup="keyupAction">
In fact, i need to add the possibility to do a specific action on "enter" key.
Best regards.
If you have a large list and wish to hold the down key to go through the list this does not work. The current active line only seems to update on after the key has been released.
The docs say:
min-len : Min length to trigger the updateItems event
<v-autocomplete :items="items" :min-len='2' v-model="item" :get-label="getLabel" :component-item='template' @update-items="updateItems"> </v-autocomplete>
I would be expecting the update to occur after the second character was entered, currently it seems to do it on n+1 character.
You can see this behaviour in the DEMO. It starts with one item selected. If you want to add any character, the input is deleted. this happens every time you have one item selected.
I your code starts with empty item, the first character is ignored.
The current behavior is that after an item is selected, if I hit backspace key, the whole selection is removed, instead remove the last letter of the label.
Is there a way to configure this behavior? I need to remove the last letter, not the whole selection string. Thanks!
After upgrading from 1.6.0 I get the following from webpack:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> at src\components\TopsPortfolios.vue
at src\App.vue
This is the current initialization that works fine for 1.5.3 but breaks for 1.6.0
`import Vue from 'vue'
import App from './App'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import Autocomplete from 'v-autocomplete'
import 'v-autocomplete/dist/v-autocomplete.css'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.config.productionTip = false
Vue.use(BootstrapVue)
Vue.use(Autocomplete)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '',
components: { App, BootstrapVue, Autocomplete }
})`
Is there anything else I can provide?
End result is no autocomplete box and broken rest of the app.
After you enter the search text, the source array got overwritten with search result. Is it a bug?
update (text) {
this.items = Animals.filter((item) => {
return (new RegExp(text.toLowerCase())).test(item.name.toLowerCase())
})
}
Can the value for Minlength be parsed to an integer before throwing the error
vue.esm.js?65d7:558 [Vue warn]: Invalid prop: type check failed for prop "minLen". Expected Number, got String.
As there is no way you can specify attribute value without the "" in html. Setting the Min length value gives the above error whether directly or via a component property
How can I set an id for the input this creates? and a name?
Hi,
I'm not sure if i'm making some mistake but I'm following the demo code.
The problem that I'm having is that the method getLabel
gets called twice the first time, one time with undefined
parameter and the second time it is called with the correct word that I just typed.
The problem in consequence is that for example, I type the word: abcd
, then the field is cleared and only bcd
is applied.
The difference in my code is that my template is not an object but a string, as follows:
<template>
<div>
<span>{{ item }}</span>
</div>
</template>
<script>
export default {
props: {
item: { required: true }
}
};
</script>
and my getLabel
method is as follows:
getLabel(item) {
if (item) {
return item;
}
return '';
}
One important thing is that I don't want the field to be initialized. The demo example initializes the field with some object, then you have to delete the current word and then everything works as expected.
To reproduce the error leave the item as an empty object or an empty string.
export default {
name: 'demo',
components: {'v-autocomplete': Autocomplete},
data () {
return {
itemsApi: [],
item: {},
items: [],
tpl: tpl
}
}
}
Thanks
Latest version.
Apply attribute min-len
, set value to "1". Error in Chrome dev tools.
Invalid prop: type check failed for prop "minLen". Expected Number, got String.
Markup:
<v-autocomplete :items="filteredUsers" min-len="1" placeholder="Enter name or email" v-model="selectedUser" :get-label="getLabel" :component-item='template' @update-items="updateItems"></v-autocomplete>
Would it be possible to clear the input when selecting an item?
Cannot find any option for this behaviour so I assume it's not implemented.
Would it be possible to modify the value of the v-autocomplete component outside of the component?
Hi,
I am a newbies.
I just want to ask how can I integrate this project into bootstrap4.
e.g. using bootstrap4-dropdowns to style the .v-autocomplete-list
Thank you very much
Reprocedure steps on the https://paliari.github.io/v-autocomplete/:
TypeError: Cannot read property 'name' of null in the console in DEMO
Hello
Can you please also add support for reset component programmatically.
currently I'm using following way to reset component.
<v-autocomplete ref="auto-complate" placeholder="Search customer" :items="items"
:get-label="getLabel" :auto-select-one-item="false" :component-item='template'></v-autocomplete >
this.$refs['auto-complate'].searchText = "";
this.items = [];
data has this type of array:
items: [
{first: "Item", last: "A"},
{first: "Item", last: "B"},
{first: "Item", last: "C"},
{first: "Item", last: "D"},
]
and
getLable method returns:
getLabel(item) {
item.first + ' ' + item.last;
},
setting items
all the time with [] (null array)
and searchText
with "" (empty string)
. so end user have to type again for new item.
Hi,
I experienced that the onKeyup listener for esc
is not working for clearing the filter in firefox.
I experienced that in my application but afterwards i realized that I happens at the demo page too.
I tested in firefox quantum and I'm using a Mcbook Air
Thanks!
I've tried
this.items = [] this.item = null this.model = '' this.value = ''
etc. Is there anyway to reset the current value of the input after a successful selection?
Hi,
Many thanks for this nice component.
I am using it with "min-len" = "0"
because I want to expand the items right after clicking on it. This feature seems to work only after typing something, then emptying the search box and clicking again. It does not expand the items on the first click.
Any idea on how to expand items on first click?
i have tried to add event on @blur
but didn't work :/
Hello,
I'm requesting you to add feature for array support. I'm using v-autocomplete 5 or more time in my application.
As per current behavior v-autocomplete works very good with String Array
["Item A", "Item B", "Item C", "Item D", "Item E", "Item F", "Item G", "Item H"]
,
but not with:
[
{first: "Item", last: "A"},
{first: "Item", last: "B"},
{first: "Item", last: "C"},
{first: "Item", last: "D"}
]
Every time I have to convert Array of object to Array of string.
Hello.
In my project i need to unset selected values and clear inputs, but something goes wrong, model in component behaves like non reactive variable.
If i try to set empty value to model, input ignore it, but work if i set non empty value.
In fiddle select some value, then push "Set empty value", you will see model become empty but not input.
https://jsfiddle.net/196e7sr9/
Also i think "min-len" option doesn't work, in example trigger fires when i write only one symbol.
Hi, I'm wondering if the package contains such attributes. so when I focus on the textbox automatically shows the total items.
Is it possible to enable autofocus on page load for v-autocomplete? This would be nice!
Like seen on properties of vuetify v-text-field: https://vuetifyjs.com/components/text-fields
Is it possible to add fuzzy search to this?
it just displays the items content, not reaction the the input data
https://www.screencast.com/t/7YqH3XFwpy7N
When I press Up OR Down arrow browser gets scroll to selected item in list.
I do not know this is feature or not. But if we can handle this it will better.
Hey Guys,
Thanks for the component. I really like it! Especially the simplicity.
I have a more theoretical consideration. Is it necessary for you to use pug and stylus? The code for the component is not very long and just to experiment a bit on the forked version you need to set up pug and stylus locally. I know it is your component and you can use whatever you wish, but wouldn't it be easier to stick to plain HTML and CSS?
For example, I added the 'name' attribute (which is now missing, but can be useful for form submits) to the component in my fork and can't really do a PR, since I 'translated' the pug and stylus code (doesn't make sense to include those dependencies in my project).
I just would like you to give it a little thought :)
Hi,
The keep-open
property is in fact not working in case when items
is an empty array: the list element is removed from the DOM, but it should not.
This breaks my UX since this list is always open and has fixed height. In case when user enters text which results in empty result list, list is removed from DOM and there occurs an unpleasant snapping in interface.
Hello, thanks for great plugin.
Got question, beacuse i can't find it in documentation:
Is there a way to trigger event when input is focused?
Thanks
hi guys
Is there a way to implement a similiar behavior as the jquery autocomplete? if the user writes some text and a list appears, to 'mark' the first one as possible the current selected? tried to implement @blur and keyup.tab but weren't able to do it.
Similar to this approach
https://stackoverflow.com/questions/22746493/get-the-selected-value-in-jquery-autocomplete-on-blur-function
thanks
When entering input, the first keystroke never registers and the input remains empty. Only subsequent keystrokes are counted.
You'll notice that your first keystroke isn't counted. This occurs in both Firefox and Chrome.
I'm trying to use :component-item property for five days, and it's very hard. I'm not using .vue files with components, but in a js file creating the components, the search i got it, but to show the results of search in two lines I didn't got. Please, make it easier to use, maybe allowing put the html (with text interpolation) in the: component-item property or another property, or calling a function that returns createElement array, or array of JSON object with a html property in every node, without having to use two components. After five days, second component (ItemTemplate) still doesn't work, it neither starts!, and the result of the search is working, but is showed like JSON.
Please, make more easy to show the result of the search in html (two lines , title in bold above and description bellow the title.
First Example to Make It Easer (HTML on :component-item or another property) :
var searchMenu=Vue.component("spsearchmenu",{ name:"spsearchmenu", components:{"v-autocomplete":VAutocomplete.default}, template:'', data() { return { item: "", items: [] } }, methods: { getLabel(item){ return item ? (item.name ? item.name : "") :""; }, updateItems(text) { text=text.toLowerCase(); this.$data.items = text ? menuList.filter(function(menu) { return ( (menu.name.toLowerCase().includes(text)) || (menu.description.toLowerCase().includes(text)) ) }) : menuList; } } });
Second Example to Make It Easer (createElemnt on :component-item or another property) :
var searchMenu=Vue.component("spsearchmenu",{ name:"spsearchmenu", components:{"v-autocomplete":VAutocomplete.default}, template:'', data() { return { item: "", items: [] } }, methods: { getLabel(item){ return item ? (item.name ? item.name : "") :""; }, createArrayElements(){ var arrayCreateElements=[]; // programmer do your magic here to fill Array return arrayCreateElements; }, updateItems(text) { text=text.toLowerCase(); this.$data.items = text ? menuList.filter(function(menu) { return ( (menu.name.toLowerCase().includes(text)) || (menu.description.toLowerCase().includes(text)) ) }) : menuList; } } });
Third Example to Make It Easer (JSON with specific properties on :component-item or another property) :
properties:
id: identifier to node and select operation
title: short text showed for user to select (in bold)
description: large text describing the item
var searchMenu=Vue.component("spsearchmenu",{ name:"spsearchmenu", components:{"v-autocomplete":VAutocomplete.default}, template:'', data() { return { item: "", items: [] } }, methods: { getLabel(item){ return item ? (item.name ? item.name : "") :""; }, createJSONArray(){ // programmer do your magic here to fill Array //example of JSON var arrayJSON=[ {id:1,title:"Open",description:"Open a new file"}, {id:2,title:"Save",description:"Save current file"}, ]; return arrayJSON; }, updateItems(text) { text=text.toLowerCase(); this.$data.items = text ? menuList.filter(function(menu) { return ( (menu.name.toLowerCase().includes(text)) || (menu.description.toLowerCase().includes(text)) ) }) : menuList; } } });
Hi! Thanks for the package 👍
Styling the input requires -webkit-appearance: textfield
, or none
. I see that you use it in the demo CSS, but this is not documented.
Also, type=search
has a special meaning; for example, I get suggestions from my contacts on OS X. This is not what I want, and I assume most people do not want this either. Rather, suggestions should only be from the items
attribute.
Changing input type to text will solve all above.
When I have many items available like 1000 items. it's display all the items and "broke" the screen. make the screen larger.
how can I prevent the list to show only after type min length?
Hi,
I need to clear the search text after a user clicked on 'Add' button.
addUser: function() {
this.group.users.push(this.selectedUser);
this.selectedUser = '';
this.userList = [];
},
<v-autocomplete :items="userList" v-model="selectedUser" :id="selectedUser" :wait="100" :get-label="getLabel" :min-len=3 placeholder="Search User" :input-class="'form-control'" :component-item="template" @update-items="updateItems"></v-autocomplete>
How is it possible?
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.