[IMP] website_field_autocomplete: compatibility many2one fields

Show Input with `displayField` value and generate hide field with `valueField` value

Author: miguel-S73

website_field_autocomplete/README.rst

@@ -36,6 +36,8 @@ Following is a breakdown of the available attributes & their defaults:
 +====================+=============================================+===============+==========+
 | data-model         | Model name to query                         |               | True     |
 +--------------------+---------------------------------------------+---------------+----------+
+| data-field         | Field name in Model                         |               | False    |
++--------------------+---------------------------------------------+---------------+----------+
 | data-query-field   | Field to query when searching               | name          | False    |
 +--------------------+---------------------------------------------+---------------+----------+
 | data-display-field | Field to display                            | query-field   | False    |
@@ -75,6 +77,8 @@ Contributors
 ------------
 
 * Dave Lasley <[email protected]>
+* `Studio73 <https://www.studio73.es>`__:
+    * Miguel Gandia <[email protected]>
 
 Maintainer
 ----------

website_field_autocomplete/static/src/js/field_autocomplete.js

@@ -41,17 +41,29 @@ odoo.define("website_field_autocomplete.field_autocomplete", function (require)
 
         /* Return arguments that are used to initialize autocomplete */
         autocompleteArgs: function () {
+            const self = this;
             return {
                 source: (request, response) => {
                     this.autocomplete(request, response);
                 },
+                focus: function (event, ui) {
+                    self.$target.val(ui.item.label);
+                    self.many2oneCompatibility(ui.item);
+                    return false;
+                },
+                select: function (event, ui) {
+                    self.$target.val(ui.item.label);
+                    self.many2oneCompatibility(ui.item);
+                    return false;
+                },
             };
         },
 
         start: function () {
             this.model = this.$target.data("model");
             this.queryField = this.$target.data("query-field") || "name";
             this.displayField = this.$target.data("display-field") || this.queryField;
+            this.field = this.$target.data("field") || this.field;
             this.valueField = this.$target.data("value-field") || this.displayField;
             this.limit = this.$target.data("limit") || 10;
             this.add_domain = this.$target.data("domain");
@@ -62,5 +74,18 @@ odoo.define("website_field_autocomplete.field_autocomplete", function (require)
             this.$target.autocomplete(this.autocompleteArgs());
             return this._super(...arguments);
         },
+
+        many2oneCompatibility: function (item) {
+            if (!this.field) return;
+            let formField = $(this.el.closest("form")).find(
+                `input[name='${this.field}']`
+            );
+            if (!formField.length) {
+                formField = $(this.el.closest("form")).append(
+                    `<input class="d-none" name='${this.field}' />`
+                );
+            }
+            formField.val(item.value);
+        },
     });
 });