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!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/cataldo91"><img src="https://avatars.githubusercontent.com/u/32928282?v=4" />cataldo91</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>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. </p> <p>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.</p> <p>In the second case returns this error: Error in mounted hook: <strong>"TypeError: this.$refs.inputSlot is undefined"</strong></p> <p>How can i resolv it?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Raiondesu"><img src="https://avatars.githubusercontent.com/u/19854420?v=4" />Raiondesu</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Hello, @cataldo91.</p> <p>Your problem is not connected to vue-simple-suggest.</p> <p>I suppose you simply haven't stated a ref in your template code.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/cataldo91"><img src="https://avatars.githubusercontent.com/u/32928282?v=4" />cataldo91</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>I'm doing something like this:</p> <div class="container"> <vue-simple-suggest v-model="chosen" :list="simpleSuggestionList" :filter-by-query="true"> <input ref="search" type="hidden" style="display:none" v-model="chosen"/> <textarea v-model="chosen">

Chosen element: {{ chosen }}