CODEWITHSUNDEEP
javascriptjqueryautocomplete
Bappa sarkar
Bappa sarkar

Reputation: 326

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">

Upvotes: 1

Views: 72

Answers (1)

Dekel
Dekel

Reputation: 62666

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,

Upvotes: 1

Related Questions