JQuery Autocomplete storing ID in hidden input
<p>I am not very good at Jquery.. I am trying to add  ID to a hidden field when user selects an Autocomplete Item </p>

<p>This is the code I am using </p>

<pre><code>&lt;input type="hidden" value="" name="CountryId" id="CountryId"&gt;

Javascript for Autocomplete 
        $(document).ready(function () {
            $("#Country").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/Address.mvc/CountryList", type: "POST", dataType: "json",
                        data: { searchText: request.term, maxResults: 10 },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.Value, value: item.Value, id: item.Key }
                            }))
                        }
                    })
                },
                select: function (event, ui) {
                    alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id)
                        : "Nothing selected, input was " + this.value);
                    $('#CountryId').val = ui.item.id;
                    console.log($('#CountryId').val + ' has faded!');
                },
                change: function (event, ui) {
                    alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id)
                        : "Nothing selected, input was " + this.value);
                    $('#CountryId').val = ui.item.id;
                    console.log($('#CountryId').val+'has faded!')


                }
            });
</code></pre>

<p>console shows the value to be </p>

<pre><code>function (value) { if (!arguments.length) { var elem = this[0]; if (elem) { if (jQuery.nodeName(elem, "option")) 
{ var val = elem.attributes.value; return !val || val.specified ? elem.value : elem.text; } if (jQuery.nodeName(elem, "select")) 
{ var index = elem.selectedIndex, values = [], options = elem.options, one = elem.type === "select-one"; if (index &lt; 0) { return null; }
 for (var i = one ? index : 0, max = one ? index + 1 : options.length; i &lt; max; i++) { var option = options[i];
 if (option.selected &amp;&amp; (jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null) &amp;&amp; (!option.parentNode.disabled || !jQuery.nodeName(option.parentNode, "optgroup"))) { value = jQuery(option).val(); if (one) { return value; } values.push(value); } } return values; }
 if (rradiocheck.test(elem.type) &amp;&amp; !jQuery.support.checkOn)
 { return elem.getAttribute("value") === null ? "on" : elem.value; } return (elem.value || "").replace(rreturn, ""); }
 return undefined; } var isFunction = jQuery.isFunction(value); 
return this.each(function (i) {var self = jQuery(this), val = value;if (this.nodeType !== 1) {return;}if (isFunction) {val = value.call(this, i, self.val());}if (val == null) {val = "";} else if (typeof val === "number") {val += "";} else if (jQuery.isArray(val)) {val = jQuery.map(val, function (value) {return value == null ? "" : value + "";});}
if (jQuery.isArray(val) &amp;&amp; rradiocheck.test(this.type)) {this.checked = jQuery.inArray(self.val(), val) &gt;= 0;} else if (jQuery.nodeName(this, "select")) {var values = jQuery.makeArray(val);jQuery("option", this).each(function () {this.selected = jQuery.inArray(jQuery(this).val(), values) &gt;= 0;});if (!values.length) {this.selectedIndex = -1;}} else {this.value = val;}}); }has faded! 
</code></pre>

<p>The val seems bring function val from JQuery core script  back instead of value of the hidden field.</p>

<p>What am I doing wrong?</p>

<p>Regards,</p>

<p>Mar</p>
