jQuery 自动完成循环遍历所选项目的值

Question

我正在使用 jQuery 自动完成插件，如下所示。这工作正常，但我想遍历所选项目的值。例如，如果选择 'Product 1'，我想将其记录到控制台：

label : Product 1
value : value1
tax   : 18%

我只是不知道该怎么做。如果我这样做 console.log(ui) 我可以看到这些值，但我如何遍历它们？你能帮忙吗？

<div class="input-group">
  <span class="input-group-addon">choices ...</span>
  <input type="text" class="form-control" placeholder="choice" name="choice" id="choice">
</div>
<div class="input-group">
  <span class="input-group-addon">value of choices ...</span>
  <input type="text" class="form-control" placeholder="" name="prid" id="prid">
</div>

$(function() {
  $("#choice").autocomplete({
    source: [{
        label: "Product 1",
        value: "value1",
        tax: "18%"
      },
      // These aren't fixed. Some products have, some less.
      {
        label: "Product 2",
        value: "value2",
        tax: "24%"
      }
    ],
    minLength: 1,
    delay: 0,
    select: function(event, ui) {
      event.preventDefault();
      $('#choice').val(ui.item.label);
      this.value = ui.item.label;
      $('#prid').val(ui.item.tax);
      // I'm stuck over here
      for (var i = 0; i < ui.length; i++) {
        console.log(ui[i]);
      }
    }
  });
});

Answer 1

您的 ui 包含以下对象

{
  "item": {
    "label": "Product 1",
    "value": "value1",
    "tax": "18%"
  }
}

如果你想遍历键，那么你使用Object.entries

var uiEntries = Object.entries(ui.item)
for (var i = 0; i < uiEntries.length; i++) {
    var uiEntry = uiEntries[i];
    //uiEntry[0] = The key
    //uiEntry[1] = The value
    console.log(uiEntry[0] + ":", uiEntry[1]);
}

或者，只需记录所有已知键，然后您将得到 undefined 任何不存在的值

console.log("label : ", ui.item.label);
console.log("value : ", ui.item.value);
console.log("tax : ", ui.item.tax);

jQuery 自动完成循环遍历所选项目的值

jQuery autocomplete loop through values of selected item

javascript

jquery

jquery-ui-autocomplete