选择时的jQuery自动完成清除输入

Question

我正在使用此代码在输入地址时弹出来自Azure Maps API的自动建议。

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

问题是，每次我选择一个地址都会清除searchBox。 但是，单击选项时，我希望街道地址填充searchBox而不是addressLineTbx 。

我尝试了以下代码，但是单击其中一个选项后， searchBox仍会清除。

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

Answer 1

在select事件中使用event.preventDefault()可以停止自动完成设置值，然后设置地址。

 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>