Get autocomplete input value to a hidden input Vue.Js

Question

I use https://santiblanko.github.io/vue-instant/ for autocompletion with Vue.

It works as I expected, except I cannot post the value inside the 'input' value to a form.

When I submit the form, the value inside the input is not posted to my backend server.

So that I have to create a hidden value when I submit so that I can read that input value.

How to do this. I just want the form and the value to be submitted as I cick magnifier icon.

<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/vue-instant.css">
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue-clickaway.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue-instant.browser.js"></script>
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!-- TODO: Missing CoffeeScript 2 -->

<script type="text/javascript">
  //<![CDATA[
  window.onload = function() {
    console.log(VueInstant)
    new Vue({
      el: '#app',
      data: {
        value: '',
        suggestionAttribute: 'original_title',
        suggestions: [],
        selectedEvent: ""
      },
      methods: {
        clickInput: function() {
          this.selectedEvent = 'click input'
        },
        clickButton: function() {
          this.selectedEvent = 'click button'
        },
        selected: function() {
          this.selectedEvent = 'selection changed'
        },
        enter: function() {
          this.selectedEvent = 'enter'
        },
        keyUp: function() {
          this.selectedEvent = 'keyup pressed'
        },
        keyDown: function() {
          this.selectedEvent = 'keyDown pressed'
        },
        keyRight: function() {
          this.selectedEvent = 'keyRight pressed'
        },
        clear: function() {
          this.selectedEvent = 'clear input'
        },
        escape: function() {
          this.selectedEvent = 'escape'
        },
        changed: function() {
          var that = this
          this.suggestions = []
          axios.get('https://api.themoviedb.org/3/search/movie?api_key=342d3061b70d2747a1e159ae9a7e9a36&query=' + this.value)
            .then(function(response) {
              response.data.results.forEach(function(a) {
                that.suggestions.push(a)
              })
            })
        }
      },
      components: {
        'vue-instant': VueInstant.VueInstant
      }
    })
  }
  //]]>
</script>

<form action="https://www.google.com" method="GET">
  <div id="app">
    <label>{{selectedEvent}}</label>
    <vue-instant :suggestonallwords="true" :suggestion-attribute="suggestionAttribute" v-model="value" :disabled="false" @input="changed" @click-input="clickInput" @click-button="clickButton" @selected="selected" @enter="enter" @key-up="keyUp" @key-down="keyDown"
      @key-right="keyRight" @clear="clear" @escape="escape" :show-autocomplete="true" :autofocus="false" :suggestions="suggestions" name="customName" placeholder="custom placeholder" type="google"></vue-instant>
  </div>
</form>

You check the below link to get the idea. In below reference link used the jQuery UI autocomplete but concept is same. stackoverflow.com/questions/56206676/… — Shivendra Singh
– Shivendra Singh, Commented Jun 1, 2019 at 16:32
Actually, you gave me an idea. I have a situation where I am trying to add an element to my API request, and with the current set of components I'm working with It's really hard to make a hidden form item where i control the value. So, as the answer suggests I'm making a hiddenformItems Prop that takes an array that i can push into the array axios method. — dustbuster
– dustbuster, Commented Nov 3, 2020 at 20:52

Neil VanLandingham · Accepted Answer · 2019-06-01 11:58:05Z

1

If I understand correctly, you want to post the suggested value to the server inside a form data object? If that's right, you can alter your clickButton method as follows.

clickButton: function() {
      this.selectedEvent = 'click button';
      var formData = new FormData();
      formData.append("selectedMovie", this.value);
      axios({
        method: 'post',
        url: '/yourapi/endpoint/',
        data: {
          formData:formData
        }
      }).then(function(response) {
        console.log(response.data);
        console.log(response.status);
        console.log(response.statusText);
      });
    }

answered Jun 1, 2019 at 11:58

Neil VanLandingham

1,0968 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SNaRe Over a year ago

I want to post but not to an end point to and url. I want to send the data via form action.

Neil VanLandingham · Accepted Answer · 2019-06-01 13:06:24Z

0

You can add the following to the html of your form element v-on:submit.prevent="send". And then add a send function to your component's methods in which you access this.value and do whatever you need to do with it.

answered Jun 1, 2019 at 13:06

Neil VanLandingham

1,0968 silver badges16 bronze badges

Collectives™ on Stack Overflow

Get autocomplete input value to a hidden input Vue.Js

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related