paliari / v-autocomplete Goto Github PK

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.

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

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!

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?

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.

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

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 :)

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.

it just displays the items content, not reaction the the input data
https://www.screencast.com/t/7YqH3XFwpy7N

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,

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

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

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?

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

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.

How can I set an id for the input this creates? and a name?

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.

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?

Hi, I'm wondering if the package contains such attributes. so when I focus on the textbox automatically shows the total items.

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.

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

hi all,
input-attrs is not working for ref, the ref attribute is not shown in input search

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.

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.

when only one matched， it auto fill input field, i want not, can you make a switch?

HI,

I tried adding this several times but the input is not picking up the class.

:input-attrs="{'class':'form-group'}"

I also tried

input-attrs="{'class':'form-group'}"

Source code:

Dev tools output:

Any advice?

Thank you

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.

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())
})
}

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

Reprocedure steps on the https://paliari.github.io/v-autocomplete/:

1. search
2. click on a result from the list
3. delete 1 character (or backspace in windows)
   --> Console shows: TypeError: Cannot read property 'name' of null in the console in DEMO

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!
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 have tried to add event on @blur but didn't work :/

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.

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>

Is it possible to add fuzzy search to this?

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.

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;
			
		}
	}
});

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.

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,

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?

When entering input, the first keystroke never registers and the input remains empty. Only subsequent keystrokes are counted.

Example:

1. Open this fiddle (taken from another issue): https://jsfiddle.net/196e7sr9/
2. Try to type in the box

You'll notice that your first keystroke isn't counted. This occurs in both Firefox and Chrome.

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

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

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!