Question

I’m having trouble working out how to retrieve the identifier of a selected value (from the jQuery autocomplete plug-in) and store it in either a hidden input or a text input.

My code is as follows:

<script type="text/javascript">
    $(function () {
        $("#person-list").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/person/getperson", type: "POST", dataType: "json",
                    data: { searchString: request.term, maxResults: 10 },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.FullName, value: item.FullName, id: item.Id }
                        }))
                    }
                })
            },
            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);
                $("#selectedid").val = ui.item.id;
                $("#selectedidhidden").val = ui.item.id;
            }
        });
    }); 
</script>

<input type="text" id="selectedid" />
<input type="hidden" id="selectedidhidden" />

My id value appears OK in the alert that is displayed so I know it is being returned OK, however it does not appear in my text input (selectedid) and I’m not really sure how to access it to test if it is getting into the hidden input (selectedidhidden). Am I going about this the correct way?

Answer 1

val is a function

$('#selectedid').val( ui.item.id );