Conditional Twitter Typeahead

Question

I am trying to figure out how to do conditional twitter typeahead. Such that after the user enters the customer, the contacts will filter to only show the contacts for that customer.

The customer typeahead works great. No problems there. However when I am writing up the JQuery for my contacts that is where the problems starts.

    function AutoCompleteContact() {
        var contacts = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: '../api/contact/names/ByCustomer/' + $('#typeahead_Customer').val(),
            }
        });

The problem seems to be with $('#typeahead_Customer').val() as the Developer Tools comes up with nothing or strange results. If I hard code an id into the Api I get the correct results for that id.

So the question is

1. Is there a proper way to do conditional twitter typeahead ( Contacts are specific to the customer previously selected )?
2. Is there something special I should be doing with the .val()? Or should I use some other indicator? I tried .prev().val() thinking maybe its the previous input technically or something.

Edit: Here is how the code looks for the form:

<form action="/Quote/Create" method="post">
<div class="form-group col-lg-10">
    <label for="Customer_Name">Name</label>
    <div class="tt-container">
        <span class="twitter-typeahead" style="position: relative; display: inline-block;">
            <input class="form-control input-lg tt-hint" type="text" value="" readonly="" autocomplete="off"
                spellcheck="false" tabindex="-1" dir="ltr"
                style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">
            <input class="form-control input-lg tt-input" id="typeahead_Customer" name="Customer.Name" type="text"
                value="" autocomplete="off" spellcheck="false" dir="auto"
                style="position: relative; vertical-align: top; background-color: transparent;">
            <pre aria-hidden="true"
                style="position: absolute; visibility: hidden; white-space: pre; font-family: Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 19px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
            <div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
                <div class="tt-dataset tt-dataset-customer">
                </div>
            </div>
        </span>
    </div>
</div>
<div class="form-group col-lg-10">
    <label for="Contact_FirstName">FirstName</label>
    <div class="tt-container">
        <span class="twitter-typeahead" style="position: relative; display: inline-block;">
            <input class="form-control input-lg tt-hint" type="text" value="" readonly="" autocomplete="off"
                spellcheck="false" tabindex="-1" dir="ltr"
                style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">
            <input class="form-control input-lg tt-input" id="typeahead_Contact" name="Contact.FirstName"
                type="text" value="" autocomplete="off" spellcheck="false" dir="auto"
                style="position: relative; vertical-align: top; background-color: transparent;">
            <pre aria-hidden="true"
                style="position: absolute; visibility: hidden; white-space: pre; font-family: Lato, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 19px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;"></pre>
            <div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
                <div class="tt-dataset tt-dataset-name"></div>
            </div>
        </span>
    </div>
</div>
<button type="submit" class="btn btn-primary">Save</button>