Question

alert('data going into $hidden: ' + selected.data[1]);  hidden.val(selected.data[1]);  alert('data now in $hidden: ' + $hidden.val()); 

What would be a reason that $hidden.val() in the last line above would return undefined? I have verified that selected.data[1] contains an integer value.

Edit #1: Some additional context per comments: ($hidden is a hidden input field)

$.fn.extend({     autocomplete: function(urlOrData, hidden, options) {         var isUrl = typeof urlOrData == 'string';         var $hidden = $(hidden);         options = $.extend({}, $.Autocompleter.defaults, {             url: isUrl ? urlOrData : null,             data: isUrl ? null : urlOrData,             delay: isUrl ? $.Autocompleter.defaults.delay : 10,             max: options && !options.scroll ? 10 : 150         }, options);          // if highlight is set to false, replace it with a do-nothing function         options.highlight = options.highlight || function(value) { return value; };          // if the formatMatch option is not specified, then use formatItem for backwards compatibility         options.formatMatch = options.formatMatch || options.formatItem;          return this.each(function() {             new $.Autocompleter(this, options, $hidden);         }); 

and…

$.Autocompleter = function(input, options, $hidden) {         //...           function selectCurrent() {             var selected = select.selected();             if (!selected)                 return false;              var v = selected.result;             previousValue = v;              if (options.multiple) {                 var words = trimWords($input.val());                 if (words.length > 1) {                     v = words.slice(0, words.length - 1).join(options.multipleSeparator) + options.multipleSeparator + v;                 }                 v += options.multipleSeparator;             }               alert('data going into $hidden: ' + selected.data[1]);              $hidden.val(selected.data[1]);              alert('data now in $hidden: ' + $hidden.val()); 

Edit #2: More details…. I’m trying to use the jQuery autocomplete extension on a form with multiple textbox controls (each implement the autocomplete). There’s a seperate button on the form beside each textbox that submits the form to a handler function that needs to find the value of the item selected and save it to the db. The way I thought to go about this was to include a hidden field on the form to hold the selected value.

Answer 1

Thanks Paolo Bergantino. I discovered that I wasn’t passing the initial hidden in with a # in front of the hidden field id, so $hidden was never getting set properly. It was difficult for me to debug because the the autocomplete is inside an ascx control as an embedded resource. Once I ensured that the value of hidden was including the # it worked properly.