Bappa sarker Bappa sarker - 1 month ago 4
Javascript Question

How to change the request done by autocomplete and add data from another text field?

I need to add the value from another element into the request of the auto complete.

Here are the fields:

enter image description here
This is the js code:

$(function () {
$("#sub_category_select_add_product_page").autocomplete({
minLength: 0,
source: function (request, response) {
console.log(request);
$.ajax({
type: 'GET',
url: 'api/autocomplete/' + request.term,
dataType: "json",
cache: false,
success: function (data_sub_category_modal) {

response($.map(data_sub_category_modal, function (item) {
return {
label: item.Product_Category_Name,
id: item.id
};
}));
},
});
},
focus: function (event, ui) {
$("#sub_category_select_add_product_page").val(ui.item.label);
return false;
},
select: function (event, ui) {
$("#sub_category_select_add_product_page").val(ui.item.label);
$("#sub_category_id").val(ui.item.id);
return false;
},
change: function() {
alert('changed');
}
}).autocomplete("instance")._renderItem = function (ul, item) {
return $("<li>")
.append("<div>" + item.label + "</div>")
.appendTo(ul);
};
});


This is my form:

<div class="row form-group">
<div class="col-md-3 form-level"><label>Product Category <b class="mandetory_star">*</b> :</label></div>
<div class="col-sm-6">
<input class="form-control" type="text" id="category_select_add_product_page">
<input class="form-control" type="hidden" name="category_id" id="category_select_add_product_page-id">
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#addCategory">
Add Category
</button>
</div>
</div>

<div class="row form-group">
<div class="col-md-3 form-level"><label>Product Sub Category <b class="mandetory_star">*</b> :</label></div>
<div class="col-sm-6">
<input class="form-control" type="text" id="sub_category_select_add_product_page">
<input class="form-control" type="hidden" name="sub_category_id" id="sub_category_select_add_product_page-id">
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#addSubCategory">
Add Sub Category
</button>
</div>
</div>


How can I put the value of


#category_select_add_product_page-id


into the


url: 'api/autocomplete/' + request.term,


This is the field:

<input class="form-control" type="hidden" name="category_id" id="category_select_add_product_page-id">

Answer

The request.term is the value that was typed inside the input field that has the autocomplete. If you want to add more information besides this value you can just change the url according to the value you need:

url: 'api/autocomplete/' + $('#category_select_add_product_page-id').val() + ' ' + request.term,
Comments