Support for <textarea>

[nattam]

I'm submitting a ...

• [x] feature request

I use vue-simple-suggest with a Dadate. Addresses are usually quite long. And the input field does not always fit the entire address. Especially on mobile devices. It would be great to add a setting for field type input or textarea.

Example:

[Raiondesu]

Hello, @nattam. Sorry for taking so long to respond.

This feature request is not particularly easy to implement with current realization of the component.

We'll schedule it for the v2.0 that is coming 2019 with the release of Vue.js v3.0.

Right now, however, you can emulate the support for textarea by doing something like this:

<vue-simple-suggest>
  <div class="wrapper">
    <input type="hidden" style="display:none" v-model="inputText"/>
    <textarea v-model="inputText"></textarea>
  </div>
</vue-simple-suggest>

This way, you'll have a hidden input that successfully duplicates everything you type into the textarea, so vue-simple-suggest can react to the changes in your text.

[Raiondesu]

For people that come here looking for the solution - remember that you can always extend any component to change its functionality, like so:

import VueSimpleSuggest from 'vue-simple-suggest'

export default {
  extends: VueSimpleSuggest,
  mounted () {
    this.inputElement = this.$refs['inputSlot'].querySelector('textarea')
    this.prepareEventHandlers(true)
  }
}

This will certainly solve problems.

[Raiondesu]

For anyone who could possibly implement support for for the current version - a PR is highly welcome!

[cataldo91]

Hi, i have the same problem. I want to change the input into a textarea in Vue-cli. i'm trying to do as in the comment but doesn't work.

In the first case i think the problem is into the Input, because it need to have focus on, otherwise doesn't search in the array.

In the second case returns this error: Error in mounted hook: "TypeError: this.$refs.inputSlot is undefined"

How can i resolv it?

[Raiondesu]

Hello, @cataldo91.

Your problem is not connected to vue-simple-suggest.

I suppose you simply haven't stated a ref in your template code.

[cataldo91]

I'm doing something like this:

<input ref="search" type="hidden" style="display:none" v-model="chosen"/>
<textarea v-model="chosen"></textarea>

Chosen element: {{ chosen }}

import VueSimpleSuggest from 'vue-simple-suggest'

export default { components: { VueSimpleSuggest }, extends: VueSimpleSuggest, mounted () { this.inputElement = this.$refs.search.querySelector('textarea') this.prepareEventHandlers(true) }, data() { return { chosen: '' } }, methods: { simpleSuggestionList() { return [ 'Vue.js', 'React.js', 'Angular.js' ] } } }

Sorry but is the first time for me in VUE.