Retrieving a jQuery autocompleted field

Question

I am using the jQuery autocomplete plugin and have wired up an input field to retrieve values from a back end database as text is entered which can then be selected.
I then have a second input field that I have wired up in a similar way however I want to pass in the first input field's value as a querystring parameter in the autocomplete ajax call so that the autocomplete results can be filtered.
I have tried using the .val() method of the first input field but this always seems to return an empty string unless I allow the form to postback. I have also tried just using getElementById('xxx').value but this returns a null value.
Is there any way I can retrieve the dynamic value selected in the first field so I can pass it into my jQuery ajax call to the server?
Code below with some removed for brevity:

<% using (Html.BeginForm()) {%>
    <script language="javascript">
        $(document).ready(function(){
            $("#Make").autocomplete('/MyController/AutoCompleteMake', {
                dataType: 'json',
                parse: function(data) {
                    var rows = new Array();
                    for (var i = 0; i < data.length; i++) {
                        rows[i] = { data: data[i], value: data[i], result: data[i] };
                    }
                    return rows;
                },
                formatItem: function(row) {
                    return row;
                },
                delay: 40
            });

            $("#Range").autocomplete('/MyController/AutoCompleteRange?Make=' + $('input[name=Make]').val(), {
                same as above .......
            });
        });
  </script>
    <fieldset>
        <legend>Fields</legend>
        <p>
            <label for="Make">Make:</label>
            <%= Html.TextBox("Make") %>
            <%= Html.ValidationMessage("Make", "*") %>
        </p>
        <p>
            <label for="Range">Range:</label>
            <%= Html.TextBox("Range") %>
            <%= Html.ValidationMessage("Range", "*") %>
        </p>
<% } %>

It is the $('input[name=Make]').val() part that is alway return empty value even if one has been selected.

I have only just started working with jQuery and MVC so any help will be greatly appreciated.

Answer 1

You need to use the extraParams function:

$("#Make").autocomplete(url, {
   extraParams: {
       yourValue: function() { return $("input[name=Make]").val(); }
   }
});

This will then be passed through in the HttpContext to your target.

This can be pulled out as follows:

string valueToUse = context.Request.QueryString["yourValue"];

From the jQuery AutoComplete Documentation:

Often one autocompleted field depends on the value of another field. In that case, the extraParams option can provide the necessary dynamic parameter

Your current code doesn't work as you're building up a static string. You need to use a function that will dynamically return the value of the input field you're interested in.