Here I am trying to achieve a autocomplete in vue.js. I have implemented autocomplete in javascript and here I am facing a issue is while i am typing a letter in category field and autocomplete list is prompting but while I am selecting from the list it is accepting only letter what I have typed in category input field instead of the selected option from the list. I am facing this issue and trying to solve a lot but unable to reach the target. So if anyone H ave an idea on this please help me.
***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>
Top comments (0)