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

Question

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

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

我认为问题在于 .data("ui-autocomplete")._renderItem 或不受支持 jquery。参考这个 Fiddler 代码，我的代码适用于 fiddler 但不适用于我的项目。不确定是什么导致了这个问题。

使用 asp 核心 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" />

Answer 1

如果您正在使用 jQuery UI 组件：以 JSON 对象作为源自动完成，您可能需要将某些属性名称更改为“标签”和“值 " 其中：

The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label.

相关Link：https://api.jqueryui.com/autocomplete/#option-source

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

更多详情，您可以参考以下代码：

  <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>

演示：

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

Autocomplete loading blank data while trying to fill multiple fields

javascript

jquery

asp.net-core

autocomplete