jquery - jQuery Autocomplete 使用一件事匹配然后填写表单的其余部分

Question

我一直在尝试使用 jquery 让自动完成功能正常工作。 jsFiddle of example我的代码似乎验证得很好-知道为什么它不起作用吗？

   $("#producername").autocomplete({
  source: [{
    "label": "Acme Producer",
    "value": {
      "name": "Acme Producer",
      "address": "555 Spruce St\nNew City, NY  55555",
      "phonenumber": "215-555-5555",
      "key": "Test Key"
    }
  }],
  select: function (event, ui) {
    $("#producername").val(ui.item.name);
    $("#phonenumber").val(ui.item.phonenumber);
    $("#address").val(ui.item.address);
    $("#producerkey").val(ui.item.key);
  },
  minLength: 1
});

html:

<table align="center">
  <tr>
    <th>Name</th>
    <td colspan>
      <input type="text" name="producername" id="producername" class="name"
      value="" />
    </td>
    <th>Phone Number</th>
    <td>
      <input type="text" name="phonenumber" id="phonenumber" class="phone" value=""
      />
    </td>
  </tr>
  <tr>
    <th>Address</th>
    <td colspan="3">
      <textarea name="address" id="address" class="name" rows="5" style="width:90%"></textarea>
      <input type="hidden" name="producerkey" id="producerkey" value=""
      />
    </td>
  </tr>
</table>

任何帮助将不胜感激！！

Answer 1

您没有在 JS fiddle（管理资源）中引用 jquery UI 库。看看这个，你非常接近。

value 属性自动设置为 autocomplete(able) 文本框的值

JSFIDDLE

$("#producername").autocomplete({
  source: [{
    "label": "Acme Producer",
    "value": "Acme Producer",
    "data": {
      "name": "Acme Producer",
      "address": "555 Spruce St\nNew City, NY  55555",
      "phonenumber": "215-555-5555",
      "key": "Test Key"
    }
  }],
  select: function (event, ui) {
    console.log(ui.item)
    $("#producername").val(ui.item.data.name);
    $("#phonenumber").val(ui.item.data.phonenumber);
    $("#address").val(ui.item.data.address);
    $("#producerkey").val(ui.item.data.key);
  },
  minLength: 1
});