JQuery Autocomplete Clearing Input on Select

Question

I'm using this code to have autosuggestions from Azure Maps API pop up when inputting an address.

https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/master/AzureMapsCodeSamples/REST%20Services/Fill%20Address%20Form%20with%20Autosuggest.html

The issue is that every time I select an address it clears the searchBox. However, I want to have the street address fill searchBox rather than addressLineTbx when an option is clicked.

I tried the following code but the searchBox still clears after clicking one of the options.

document.getElementById('searchBox').value = (selection.address.streetNumber ? (selection.address.streetNumber + ' ') : '') + (selection.address.streetName || '');

Ricky Ricky · Accepted Answer · 2019-07-30T20:24:07

Use event.preventDefault() in the select event to stop the autocomplete from setting a value and then set the address.

 select: function(event, ui) {
      //Stop the autocomplete from setting a value
      event.preventDefault();

      //When a suggestion has been selected.
      var selection = ui.item;

      //Format address
      var address = (selection.address.streetNumber ? (selection.address.streetNumber + ' ') : '') + (selection.address.streetName || '')

      //Set the address to the autocomplete
      $(this).val(address)

      //Populate the address textbox values.
      // document.getElementById('addressLineTbx').value = address;

      // ...
 }

//Get your Azure Maps key at https://azure.com/maps
var subscriptionKey = '<YOUR AZURE MAPS KEY>';
var addresssGeocodeServiceUrlTemplate = 'https://atlas.microsoft.com/search/address/json?typeahead=true&subscription-key={subscription-key}&api-version=1&query={query}&language={language}&countrySet={countrySet}&view=Auto';

document.addEventListener("DOMContentLoaded", PageLoaded);

function PageLoaded() {
  //Create a jQuery autocomplete UI widget.
  $("#searchBox").autocomplete({
    minLength: 3, //Don't ask for suggestions until atleast 3 characters have been typed.
    source: function(request, response) {
      //Create a URL to the Azure Maps search service to perform the address search.
      var requestUrl = addresssGeocodeServiceUrlTemplate.replace('{query}', encodeURIComponent(request.term))
        .replace('{subscription-key}', subscriptionKey)
        .replace('{language}', 'en-US')
        .replace('{countrySet}', 'US'); //A comma seperated string of country codes to limit the suggestions to.
      $.ajax({
        url: requestUrl,
        success: function(data) {
          response(data.results);
        }
      });
    },
    select: function(event, ui) {
      //Stop the autocomplete from setting a value
      event.preventDefault();

      //When a suggestion has been selected.
      var selection = ui.item;

      //Format address
      var address = (selection.address.streetNumber ? (selection.address.streetNumber + ' ') : '') + (selection.address.streetName || '')

      //Set the address to the autocomplete
      $(this).val(address)

      //Populate the address textbox values.
      document.getElementById('addressLineTbx').value = address;
      document.getElementById('cityTbx').value = selection.address.municipality || '';
      document.getElementById('countyTbx').value = selection.address.countrySecondarySubdivision || '';
      document.getElementById('stateTbx').value = selection.address.countrySubdivision || '';
      document.getElementById('postalCodeTbx').value = selection.address.postalCode || '';
      document.getElementById('countryTbx').value = selection.address.countryCodeISO3 || '';
    }
  }).autocomplete("instance")._renderItem = function(ul, item) {
    //Format the displayed suggestion to show the formatted suggestion string.
    var suggestionLabel = item.address.freeformAddress;
    if (item.poi && item.poi.name) {
      suggestionLabel = item.poi.name + ' (' + suggestionLabel + ')';
    }
    return $("<li>")
      .append("<a>" + suggestionLabel + "</a>")
      .appendTo(ul);
  };
}

#searchBox {
  width: 400px;
}

.addressForm {
  margin-top: 10px;
  background-color: #008272;
  color: #fff;
  border-radius: 10px;
  padding: 10px;
}

.addressForm input {
  width: 265px;
}

<!-- Load JQuery UI -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

<input type='text' id='searchBox' />

<table class="addressForm">
  <tr>
    <td>Street Address:</td>
    <td><input type="text" id="addressLineTbx" /></td>
  </tr>
  <tr>
    <td>City:</td>
    <td><input type="text" id="cityTbx" /></td>
  </tr>
  <tr>
    <td>County:</td>
    <td><input type="text" id="countyTbx" /></td>
  </tr>
  <tr>
    <td>State:</td>
    <td><input type="text" id="stateTbx" /></td>
  </tr>
  <tr>
    <td>Zip Code:</td>
    <td><input type="text" id="postalCodeTbx" /></td>
  </tr>
  <tr>
    <td>Country:</td>
    <td><input type="text" id="countryTbx" /></td>
  </tr>
</table>

<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
  <legend>Fill Address Form with Autosuggest</legend>
  This sample shows how to use the Azure Maps Search service with <a href="https://jqueryui.com/autocomplete/">JQuery UI's autocomplete widget</a> which provides address suggestions as the user types and which populates a form with the selected suggestion.
</fieldset>

JQuery Autocomplete Clearing Input on Select

1 Answers