JQuery autocomplete - reset hidden input field-CodePudding

I am using jquery autocomplete on my form which returns a label for the input tag and a value for a related hidden tag. This works perfectly for the searches I do with serached values echoed back into the form.

The problem arises when the user blanks out the label text in the input field using the cursor and leaves the field blank. While label now has no value (correct) the hidden element still has the previous value which continues to be used in searches (incorrect). How do I get rid of the hidden value when the user blanks out the data in the related input field?

$( function() {

 // Single Select
 $( "#locations" ).autocomplete({
  source: function( request, response ) {
   // Fetch data
   $.ajax({
    url: "getlocations.php",
    type: 'post',
    dataType: "json",
    data: {
     search: request.term
    },
    success: function( data ) {
     response( data );
    }
   });
  },
  select: function (event, ui) {
     // Set selection
     $('#locations').val(ui.item.label); // display the selected text
      $('#location').val(ui.item.value);
     return false;
  },
  focus: function(event, ui){
     $( "#locations" ).val( ui.item.label );
      $('#location').val(ui.item.value);
     return false;
   },
 });

});

<input name="locationname" id = "locations" 
value="<? echo $locationname; ?>" placeholder="City ...">

<input type="hidden" id="location" name="location" 
value="<? echo $location; ?>">

CodePudding user response：

Consider the following example.

$(function() {
  // Single Select
  $("#locations")
    .blur(function() {
      if ($(this).val() == "") {
        $("#location").val("");
      }
    })
    .autocomplete({
      source: function(request, response) {
        // Fetch data
        $.ajax({
          url: "getlocations.php",
          type: 'post',
          dataType: "json",
          data: {
            search: request.term
          },
          success: function(data) {
            response(data);
          }
        });
      },
      select: function(event, ui) {
        // Set selection
        $('#locations').val(ui.item.label); // display the selected text
        $('#location').val(ui.item.value);
        return false;
      },
      focus: function(event, ui) {
        $("#locations").val(ui.item.label);
        $('#location').val(ui.item.value);
        return false;
      },
    });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<input name="locationname" id="locations" value="City 1" placeholder="City ...">
<input type="hidden" id="location" name="location" value="1001">

If the User clears the value and then leaves the field, blur event will be triggered. The assigned callback will clear the hidden field.