I have written an autocomplete function. When I click on #input3 it starts to generate what I have typed.
Example: "apple" I type "app" and I click to select "apple". What I select should be sent to the src and updated in #input2.
Problem: What is sent to the src is what I have typed and not what I have selected. Why?
.autocomplete({
source: function(request, response) {
$.ajax({
url: src,
fillin:true,
dataType: "json",
data: {
term : request.term,
c3 : $("#input3").val()
},
success: function(data){
response(data)
}
});
},
minLength: 0,
delay: 300
})
.change(function(request2, response) {
$.ajax({
url: src,
dataType: "json",
data: {
term : request2.term,
c1 : "search",
c3: $("#input3").val()
},
success: function(data){
$("#input2").val(data);
}
});
})
You can use the change event in jquery ui autocomplete:
$("#your_input_id").autocomplete({
source: availableTags,
change: function(){
console.log($(this).val());//selected value
}
});
I have solve it. I add the cod after .autocomplete
focus: function(event, ui) {
$("#txtBufferTwo").val(ui.item.value);
event.preventDefault();
},
Follow by a hidden field.
What I did was once selection was click, the value is assign to the hidden field and submit the value of the hidden field. If there is any better methods feel free to post here