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

robert_rg

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

键入时，在自动完成功能上出现小的空白行并停止搜索。

我相信问题出在.data（“ ui-autocomplete”）._ renderItem或不受支持的jquery。引用此Fiddler代码，我的代码可在fiddler上使用，但不适用于我的项目。不知道是什么原因引起的。

使用ASP Core 3.1并返回与下面相同的json（项目）

Java脚本

 $(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" />

张白兰

如果您使用的是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>

演示：