javascript - 尝试填充多个字段时自动完成加载空白数据

问题描述

尝试使用自动完成来选择一个值并填写多个字段。

输入时自动完成和搜索停止时出现小空行。

我相信问题出在 .data("ui-autocomplete")._renderItem或不受支持的 jquery 上。参考这个提琴手代码，我的代码适用于提琴手，但不适用于我的项目。不知道是什么导致了这个问题。

使用 asp core 3.1 并返回与以下（项目）相同的 json

Javascript

 $(function() {
  var projects = [
   {
      "id":1,
      "name":"Service 1",
      "price":250.00,
      "quantity":1,
      "decription":"some stuff"
   },

   {"id":2,
      "name":"Service 2",
      "price":250.00,
      "quantity":1,
      "decription":"more stuff"
   },

   {"id":3,
      "name":"Service 3",
      "price":50.00,
      "quantity":1,
      "decription":"extra stuff"
   }
  ]
 
    $(".order_name").autocomplete({
        minLength: 0,
        source: projects,
        focus: function (event, ui) {
            $(".order_name").val(ui.item.name);
            return false;
        },
        select: function (event, ui) {
            $(".price").val(ui.item.price);
            $(".name").val(ui.item.name);
            $(".quantity").val(ui.item.quantity);
            $(".description").val(ui.item.decription);
            return false;
        }
    })
        .data("ui-autocomplete")._renderItem = function (ul, item) {
            return $('<li></li>')
                .append("<a id='" + item.name + "'>" + item.name + "</a>")
                .appendTo(ul);
        };
});

HTML

<div>Search:</div>

Search: <input class="order_name" />
<br><br>

Price : <input type="text" class="price" /><br>
Quantity : <input type="text" class="quantity" /><br>
Description : <input type="text" class="description" />

标签： javascriptjqueryasp.net-coreautocomplete

如果您使用 jQuery UI 组件：使用 JSON 对象作为源的自动完成功能，您可能需要将一些属性名称更改为“label”和“value”，其中：

标签属性显示在建议菜单中。当用户选择一个项目时，该值将被插入到输入元素中。如果只指定了一个属性，它将用于两者，例如，如果您只提供值属性，则该值也将用作标签。

因此，在您的情况下，您应该将“名称”属性更改为“标签”属性。

更多细节，您可以参考以下代码：

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" 
            ></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script>
        $(function () {
            console.log("Start");
            var projects = [
                {
                    "id": 1,
                    "label": "Service 1",
                    "price": 250.00,
                    "quantity": 1,
                    "decription": "some stuff"
                },

                {
                    "id": 2,
                    "label": "Service 2",
                    "price": 250.00,
                    "quantity": 1,
                    "decription": "more stuff"
                },

                {
                    "id": 3,
                    "label": "Service 3",
                    "price": 50.00,
                    "quantity": 1,
                    "decription": "extra stuff"
                }
            ];

            $(".order_name").autocomplete({
                minLength: 0,
                source: projects,
                focus: function (event, ui) {
                    $(".order_name").val(ui.item.label);
                    return false;
                },
                select: function (event, ui) {
                    $(".price").val(ui.item.price);
                    $(".name").val(ui.item.label);
                    $(".quantity").val(ui.item.quantity);
                    $(".description").val(ui.item.decription);
                    console.log("select");
                    return false;
                }
            })
                .data("ui-autocomplete")._renderItem = function (ul, item) {
                    return $('<li></li>')
                        .append("<a id='" + item.label + "'>" + item.label + "</a>")
                        .appendTo(ul);
                };
        });
    </script>

演示：

javascript - 尝试填充多个字段时自动完成加载空白数据

问题描述

解决方案

推荐阅读