search

sagalbot / vue-select

Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.
https://vue-select.org
MIT License
4.62k stars 1.33k forks source link

Programmatic adjustment of search query #1601

Closed kmcluckie closed 1 year ago

kmcluckie commented 2 years ago

Is your feature request related to a problem? Please describe. I wish to programatically change the search value of the select component. Insead of having the user type a search query I want to assist by providing a list of words that the user can click on that is then entered as the search query. However, I am not able to access the search query of the component as it is in data.

Describe the solution you'd like I would like a solution to be able to specify a search string to the select and then open it.

Describe alternatives you've considered I have tried hacking around with locating the physical input and setting the value. I have also added a search slot and added a "value" prop to the input but that conflicts with the internal search value it seems. I am stuck!

Much thanks.

runemy commented 1 year ago

Hi. Did you find a solution on this? I have the same issue.

kmcluckie commented 1 year ago

Something quite awful, but when clicking on the word I want to add to the search query it calls the following method:

addWord(word) {
    this.searchPhrase = this.searchPhrase + ' ' + word;
    this.$refs['product-select'].search = this.searchPhrase;
    const inputElement = this.$refs['product-select'].$el.getElementsByTagName('input')[0];
    inputElement.focus();
},

searchPhrase is component data, product-select is the ref property on the vue-select element.

Hope that helps, but happy to hear of a better solution.