javascript - 如何更改自动完成完成的请求并从另一个文本字段添加数据？

Question

我需要将另一个元素的值添加到自动完成的请求中。

以下是字段:

这是js代码:

$(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);
    };
});

这是我的表格:

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

如何输入值

#category_select_add_product_page-id

进入

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

这是字段:

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

Answer 1

request.term 是在具有自动完成功能的input 字段中键入的值。如果您想添加除此值之外的更多信息，您只需根据您需要的值更改 url 即可:

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