JQuery UI Autocomplete и скрытое поле

Question

Я реализовал виджеты автозаполнения JQuery UI в своей форме, поэтому, когда пользователь выбирает элемент из автозаполнения, скрытое поле заполняется идентификатором и текстовым полем с удобным для пользователя текстом.

Я также внедрил удаленную проверку, поэтому, если пользователь после выбора элемента из списка (уже установленное скрытое поле) решает удалить или изменить текст, он не будет выполнен, и заставит пользователя снова выбрать элемент.

Я хочу, чтобы позволить пользователю удалить поле, так что если все содержимое текстового поля удаляется, я хочу, чтобы сбросить скрытое поле, но я не знаю, как это сделать ...

Спасибо заранее.

Answer 1

Как правило, вы можете поймать определенные события в поле ввода, которое является виджлого автозаполнения. Основными являются blur, где поле ввода теряет фокус, или keyup, где кто-то попал в поле ввода внутри поля ввода (возможно, пытается отправить форму).

В следующем примере показано, как "скрытое" поле может быть обновлено в этих двух сценариях:

$(function() { 
 
    var availableTags = [ 
 
     "ActionScript", 
 
     "AppleScript", 
 
     "Asp", 
 
     "BASIC", 
 
     "C", 
 
     "C++", 
 
     "Clojure", 
 
     "COBOL", 
 
     "ColdFusion", 
 
     "Erlang", 
 
     "Fortran", 
 
     "Groovy", 
 
     "Haskell", 
 
     "Java", 
 
     "JavaScript", 
 
     "Lisp", 
 
     "Perl", 
 
     "PHP", 
 
     "Python", 
 
     "Ruby", 
 
     "Scala", 
 
     "Scheme" 
 
    ]; 
 
    function split(val) { 
 
     return val.split(/,\s*/); 
 
    } 
 
    function extractLast(term) { 
 
     return split(term).pop(); 
 
    } 
 
    
 
    $("#tags") 
 
     // don't navigate away from the field on tab when selecting an item 
 
     .bind("keydown", function(event) { 
 
     if (event.keyCode === $.ui.keyCode.TAB && 
 
      $(this).autocomplete("instance").menu.active) { 
 
      event.preventDefault(); 
 
     } 
 
     }) 
 
     .autocomplete({ 
 
     minLength: 0, 
 
     source: function(request, response) { 
 
      // delegate back to autocomplete, but extract the last term 
 
      response($.ui.autocomplete.filter(
 
      availableTags, extractLast(request.term))); 
 
     }, 
 
     focus: function() { 
 
      // prevent value inserted on focus 
 
      return false; 
 
     }, 
 
     select: function(event, ui) { 
 
      var terms = split(this.value); 
 
      // remove the current input 
 
      terms.pop(); 
 
      // add the selected item 
 
      terms.push(ui.item.value); 
 
      // add placeholder to get the comma-and-space at the end 
 
      terms.push(""); 
 
      this.value = terms.join(", "); 
 
      $("#hiddenField").val(terms.join(", ")); 
 
      return false; 
 
     } 
 
     }); 
 
}); 
 
$("#tags").blur(function() { 
 
    $("#hiddenField").val(this.value); 
 
}); 
 
$("#tags").keyup(function (e) { 
 
    if (e.keyCode == 13) { 
 
     $("#hiddenField").val(this.value); 
 
    } 
 
});

.hiddenFields { 
 
    margin-bottom: 30px; 
 
} 
 
.hiddenF { 
 
    color: gray; 
 
} 
 
.hiddenI { 
 
    color: gray; 
 
    border: 1px dotted gray; 
 
    opacity: 50%; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
 
<div class="hiddenFields"> 
 
    <label for="hiddenField" class="hiddenF">Hidden Field: </label> 
 
    <input id="hiddenField" class="hiddenI" size="50" readonly/> 
 
</div> 
 
<div class="ui-widget"> 
 
    <label for="tags">Tag programming languages: </label> 
 
    <input id="tags" size="50"> 
 
</div>