javascript - 使用自动完成 jquery 和 Odoo rpc 调用输入不显示建议

Question

我想在用户仍在按键时使用 jquery 自动完成从后端加载数据。 我看到了 site用于使用 ajax 调用进行自动完成。

这是我正在使用的代码，但我对结果很困惑。 我不明白自动完成如何取回 odoo rpc 结果并将其显示在输入表单中

<label class="control-label" for="timesheet_user_id">Employee:
</label>
<input id="employee_name"/>

和 jquery 自动完成

  var employee_name = $('#employee_name');
    employee_name.autocomplete({
        source: function (request, response) {
           ajax.jsonRpc("/employee_search", "call", {"name": employee_name.val()})
                .then(function (data) {
                   response(data);
                   console.debug(response);
                });
        },
        onSelect: function (suggestion) {
            alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
        }
    });

通过控制台，我看到我收到了对象数组，但在 html 上没有任何反应。

可能是数据类型错误或我如何进行 rpc 调用？

后端函数:

@http.route("/employee_search", type="json",
            auth="public", website=True)
def employee_search(self, name):

    employee_objs = request.env["hr.employee"] \
        .sudo().search([("name", "ilike", name)])

    if not employee_objs:
        return {"fail": True}

    suggestions = []
    for employee in employee_objs:
        employee_vals = {}
        employee_vals['value'] = employee.id
        employee_vals['data'] = employee.name
        suggestions.append(employee_vals)

    # make a dict of dicts with employees values
    return suggestions

编辑

修改成jquery自动完成response = data; with

.then(function (data) {
       response(data);
       console.debug(response);
});

现在输入显示两个没有文本的小方框。 输入框后仍未显示从rpc调用接收到的数据

EDIT2

问题出在 source: 上，因为如果我传递一个静态对象数组，我可以看到它们，但是这个调用没有任何反应....我哪里错了？

employee_name.autocomplete({
            source: function (request, response) {
               ajax.jsonRpc("/employee_search", "call", {"name": employee_name.val()})
                    .then(function (data) {
                       response(data);
                       console.debug(response);
                    });
            }
        });

数据包含值数组，但源不捕获它们。

Answer 1

好吧，我终于写了一个代码，用于实时搜索和建议:

这里是 JS:

/*Autocomplete that suggest input*/
    var serial_number = $('#searchSerial');
    serial_number.autocomplete({
        minLength: 3,
        source: function (request, response) {
            ajax.jsonRpc("/serial_search", "call", {"serial": serial_number.val()})
                .then(function (data) {
                    console.debug(data);
                    if (data.fail) {
                        // if SN was not found in the db alert the user
                        // This is non blocking, the user can still compile the form
                        //alert(_t("Serial Number not found in the system, please fill the form manually"));
                        serial_number.addClass('error_input');
                    } else {
                        serial_number.removeClass('error_input');
                        response(data);
                    }
                });
        },
        //If the record return is only one auto select it
        response: function (event, ui) {
            if (ui.content.length === 1) {
                ui.item = ui.content[0];
                serial_number.val(ui.item.value);
                serial_number.data('ui-autocomplete')._trigger('select', 'autocompleteselect', ui);
                serial_number.autocomplete('close');
            }
        },
        select: function (event, ui) {
            let brand_id = $("input[name='brand_id']");
            let brand_name = $("input[name='brand_name']");
            let product_id = $("input[name='product_id']");
            let product_name = $("input[name='product_name']");
            let serial_number = $("input[name='serial_number']");

            brand_id.val(ui.item.brand_id);
            brand_name.val(ui.item.brand_name);
            product_id.val(ui.item.product_id);
            product_name.val(ui.item.product_name);
            serial_number.val(ui.item.serial_number);
        }
    });

当用户输入至少 3 个字母时，Javascript 代码进行搜索，如果只有一条记录匹配大小写，则由 response: 自动选择。 selected: 当用户选择某个语音到建议列表时填充其他输入字段。

这里是返回建议数据的 Controller :

  @http.route("/serial_search", type="json",
                auth="public", website=True)
    def serial_search(self, serial):
        """
        Starting from a serial number (portal user input),
        serach for the corresponding lot and then search
        for product id/name and brand id/name.
        Return them to the website form.
        """
        serial_domain = [("name", "ilike", serial)]

        serial_objs = request.env["stock.production.lot"] \
            .sudo().search(serial_domain, limit=10)

        if not serial_objs:
            return {"fail": True}

        suggestions = []
        for serial_obj in serial_objs:
            serial_vals = {}
            serial_vals['data'] = serial_obj.product_id.id
            serial_vals['value'] = serial_obj.name

            serial_vals['product_id'] = serial_obj.product_id.id
            serial_vals['product_name'] = '%s - %s' % (
                serial_obj.product_id.default_code, serial_obj.product_id.name)
            serial_vals['brand_id'] = serial_obj.product_id.product_brand_id.id
            serial_vals['brand_name'] = serial_obj.product_id.product_brand_id.name
            serial_vals['serial_number'] = serial_obj.name

            suggestions.append(serial_vals)

        # make a list of dicts with serial number values
        return suggestions