JQuery UI Autocomplete and hidden field - jquery-ui

Question

I have implemented the JQuery UI Autocomplete widgets in my form so when the user selects an item from the autocomplete, a hidden field is populated with the id and the textbox with the user friendly text.
I have also implemented a remote validation so if the user after selecting an item from the list (hidden field already set) decides to delete or change the text it will fail and force the user to select an item again.
I do want to allow the user to delete the field so if all content of the textbox is deleted I want to reset the hidden field, but I don't know how to do this...
Thanks in advance.

Answer 1

Typically, you can catch certain events on the input field that is the Autocomplete widget. The main ones would be blur where the input field loses focus and or keyup where someone has hit enter inside the input field (maybe trying to submit the form).
The following example shows how a "hidden" field could be updated in these two scenarios:
$(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>