Question

I have been trying to get autocomplete to work using jquery. jsFiddle of example My code seems to validate fine – any idea why it is not working?

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

Any help would be greatly appreciated!!

Answer 1

You didn’t reference the jquery UI library in your JS fiddle (Manage Resources). Check this out one, you were very close.

The value property gets automatically set as the value of the textbox that is 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
});