***javascript autocomplete**
<script>
    $(function () {
        $("#id_post_type").autocomplete({
            source: '{% url 'autocomplete' %}',
        });
    });
</script>

<div>
<input type="text" v-model="category" placeholder="Search your category" name="category" maxlength="200" id="id_post_type" autocomplete="on" required>
</div>

<script>
    Vue.use(VueFormWizard)
new Vue({
 el: '#q-vikreya',

    components: {
        "vue-form-g": VueFormGenerator.component
    },

    data() {
            return {
            step:1,
            category:'',
            model:'',
        formOptions: {
            validateAfterLoad: true,
            validateAfterChanged: true
        }
            };
    },
<!--/ By using this delimiters we were able to fix the vue.js compatibility with django. since the curly braces between django and-->
<!--    // vue.js conflicted, delimiters helped here to solve the conflicts-->
    delimiters: ["<%","%>"],
        ready: function() {
        console.log('ready');
    },

 methods: {
    prev(currentStep) {
      if(this.checkForm()) {
          if (currentStep === 4) {
             this.step = 3
          } else {
             this.step--;
          }
      }
    },
    next(currentStep) {
      if(this.checkForm()) {
        if (currentStep === 4) {
          this.step = 5
        } else {
          this.step++;
        }
      }
    },
    checkForm: function (e) {
      if (this.category && this.title) {
        return true;
      }

      this.errors = [];

      if (!this.category) {
        this.errors.push('Name required.');
      }
      if (!this.title) {
        this.errors.push('Age required.');
      }

      e.preventDefault();
    },
      submitForm: function(){
            axios({
                method : "POST",
                url: "{% url 'PostAd' %}", //django path name
                headers: {'X-CSRFTOKEN': '{{ csrf_token }}', 'Content-Type': 'application/json'},
                data : {"category":this.category, "title":this.title,
                "address":this.address,
                "city": this.city,
                "state": this.state,
                "zip": this.zip,
                "price": this.price,
                "description": this.description,
                "radio_price": this.radio_price,
                "Job_title": this.model,
                },//data
              }).then(response => {
              console.log("response");
              console.log(response.data);
                  this.success_msg = response.data['msg'];
                 window.location.replace('{% url "classifieds" %}')  // Replace home by the name of your home view

              }).catch(err => {
                     this.err_msg = err.response.data['err'];
              console.log("response1");
              console.log(err.response.data);

              });

          },
  },
})

</script>