bugfix> javascript > 投稿

ユーザーがまだキーを押しているときにバックエンドからデータをロードするには、jqueryオートコンプリートを使用します。 私はそれを見る地点 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; をオートコンプリートすると

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

これで、入力には内部にテキストのない2つの小さなボックスが表示されます。 入力ボックスの後に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);
                    });
            }
        });

データには値の配列が含まれますが、ソースはそれらをキャッチしません。

回答 1 件
  • OK、最後にリアルタイム検索に役立つコードを提案とともに書きます:

    ここで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);
            }
        });
    
    

    Javascriptコードは、ユーザーが少なくとも3文字を入力したときに検索を行います。1つのレコードのみがケースに一致する場合、それは response: によって自動的に選択されます 。 ザ・ selected:  ユーザーが特定の音声を提案リストに選択すると、ケースは他の入力フィールドに入力します。

    ここで提案データを返すcheコントローラ:

     @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
    
    

あなたの答え