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>HTML</p>

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

<p>Javascript</p>

<pre><code>$(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>
