jQuery autocomplete with IDs

Question

I'm trying to use jQuery autocomplete.result() to get the ID associated with the name value the user selects. Here's the script:

<script type="text/javascript">
    $("#DonorName").autocomplete($('#ajaxListMatchingDonorNamesUrl').val())
        .result(function (evt, data, formatted) {
            $("#SelectedDonorId").val(data[1]);
        });
</script>

And here's the HTML I'm trying to use it from:

Html.TextBox("DonorName", "")

<input
    id="ajaxListMatchingDonorNamesUrl" 
    type="hidden" 
    value="path" />
<input type="hidden"
    name="SelectedDonorId" />

Firebug shows the correct values in data[] (e.g., [0]=Name and [1]=ID). However, when the form POSTs, the SelectedDonorId value is empty.

I tried removing the from the html, but that simply removes the key from the param collection after the POST.

What am I missing? Thx.

Answer 1

What is the type of your data?

I believe autocomplete is expecting a list of items not a string. when I added split(" "), your code worked for me (for a space separated list of strings).

$("#DonorName").autocomplete($('#ajaxListMatchingDonorNamesUrl').val().split(' '))

I also changed data[1] to data.

$("#SelectedDonorId").val(data);

in other words...data is not an array when I get it back.

EDIT: Adding from comments...add the 'id' attribute to the hidden input box instead of the 'name' attribute.

Answer 2

Change this

$("#SelectedDonorId").val(data[1]);

to

$("input[name=SelectedDonorId]").val(data[1]);

Answer 3

Thanks everyone. Simply adding id='SelectedDonorId' got everything working, just as Santosc thought it would.

Note: Data[] is indeed correct because I'm passing back a list in the form

name|id"\n"

where name = what autocomplete will work on and show,

id is the reference I want to use in the POST method,

"\n" is what is usually is (newline).

autocomplete has some cool magic in that .result does the 'split', and puts the name in Data[0] and the id in Data[1]. So just referencing it is all that's needed.