jQuery автозаполнение - сброс скрытого поля ввода

#html #jquery

Вопрос:

Я использую автозаполнение jquery в своей форме, которая возвращает a label для input тега и a value для связанного hidden тега. Это идеально подходит для поиска, который я выполняю с сохраненными значениями, возвращенными в форму.

Проблема возникает, когда пользователь label удаляет текст в поле ввода с помощью курсора и оставляет поле пустым. В то время label как теперь не имеет значения (правильно) hidden , элемент все еще имеет предыдущее value значение, которое продолжает использоваться в поиске (неверно). Как мне избавиться от hidden value ситуации, когда пользователь заполняет данные в соответствующем поле ввода?

 $( 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; ?>">

1. Добро пожаловать в Stack Overflow. Похоже, вы хотите иметь blur обратный вызов, который проверяет, является ли значение пустым, и удаляет значение из скрытого элемента. Вам нужно будет назначить .blur() обратный $("#locations") вызов элементу, а не в автозаполнении.

Ответ №1:

Рассмотрим следующий пример.

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

Если Пользователь очистит значение, а затем покинет поле, blur произойдет событие. Назначенный обратный вызов очистит скрытое поле.