jQuery Simple Example

HTML

<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<label for="search_field">Address</label>
<input type='text' class='address_field' />


<div>
  <table id="requestTable">
    <tbody>
      <tr>
        <td class="tdLabel">
          <label>Name:</label>
        </td>
        <td class="tdInput">
          <input type="text" id="user-name" name="display-name" pattern="[A-Za-z\s]+" maxlength="50" minlength="2" required>
        </td>
      </tr>
      <tr>
        <td class="tdLabel">
          <label>Stream List:</label>
        </td>
        <td>
          <select id="selectStyle" name="streamlistselect"></select>
        </td>
      </tr>
    </tbody>
  </table>
</div>

CSS

body {
    padding: 5px;
}

label {
    font-weight: bold;
}

input[type=text] {
    width: 20em
}

p {
    margin: 1em 0 0;
}

#selectStyle {
  height: 29px;
  overflow: hidden;
  width: 470px;
}

JavaScript

$(document).ready(function() {
  $(".address_field").each(function(index){  
    var widget = new AddressFinder.Widget(this, "WR3NUKVGC4Q97FPHBJXL");
  });
  
  var renderCSVDropdown = function(csv) {
  var dropdown = $('select#selectStyle');
  for (var i = 0; i < csv.length; i++) {
    var record = csv[i];
    var entry = $('<option>').html('value', record.someProperty);
    console.log('record:' + record);
    dropdown.append(entry);
  }
};

renderCSVDropdown(['abc', 'def']);

  
});