title: Conditional Twitter Typeahead
body: <p>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.</p>
  <p>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.</p>
  <pre><code>    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(),
              }
          });
  </code></pre>
  <p>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.</p>
  <p>So the question is</p>
  <ol>
  <li>Is there a proper way to do conditional twitter typeahead ( Contacts
  are specific to the customer previously selected )?</li>
  <li>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.</li>
  </ol>
  <p>Edit: Here is how the code looks for the form:</p>
  <pre><code>&lt;form action=&quot;/Quote/Create&quot; method=&quot;post&quot;&gt;
  &lt;div class=&quot;form-group col-lg-10&quot;&gt;
      &lt;label for=&quot;Customer_Name&quot;&gt;Name&lt;/label&gt;
      &lt;div class=&quot;tt-container&quot;&gt;
          &lt;span class=&quot;twitter-typeahead&quot; style=&quot;position: relative; display: inline-block;&quot;&gt;
              &lt;input class=&quot;form-control input-lg tt-hint&quot; type=&quot;text&quot; value=&quot;&quot; readonly=&quot;&quot; autocomplete=&quot;off&quot;
                  spellcheck=&quot;false&quot; tabindex=&quot;-1&quot; dir=&quot;ltr&quot;
                  style=&quot;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);&quot;&gt;
              &lt;input class=&quot;form-control input-lg tt-input&quot; id=&quot;typeahead_Customer&quot; name=&quot;Customer.Name&quot; type=&quot;text&quot;
                  value=&quot;&quot; autocomplete=&quot;off&quot; spellcheck=&quot;false&quot; dir=&quot;auto&quot;
                  style=&quot;position: relative; vertical-align: top; background-color: transparent;&quot;&gt;
              &lt;pre aria-hidden=&quot;true&quot;
                  style=&quot;position: absolute; visibility: hidden; white-space: pre; font-family: Lato, &amp;quot;Helvetica Neue&amp;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;&quot;&gt;&lt;/pre&gt;
              &lt;div class=&quot;tt-menu&quot; style=&quot;position: absolute; top: 100%; left: 0px; z-index: 100; display: none;&quot;&gt;
                  &lt;div class=&quot;tt-dataset tt-dataset-customer&quot;&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group col-lg-10&quot;&gt;
      &lt;label for=&quot;Contact_FirstName&quot;&gt;FirstName&lt;/label&gt;
      &lt;div class=&quot;tt-container&quot;&gt;
          &lt;span class=&quot;twitter-typeahead&quot; style=&quot;position: relative; display: inline-block;&quot;&gt;
              &lt;input class=&quot;form-control input-lg tt-hint&quot; type=&quot;text&quot; value=&quot;&quot; readonly=&quot;&quot; autocomplete=&quot;off&quot;
                  spellcheck=&quot;false&quot; tabindex=&quot;-1&quot; dir=&quot;ltr&quot;
                  style=&quot;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);&quot;&gt;
              &lt;input class=&quot;form-control input-lg tt-input&quot; id=&quot;typeahead_Contact&quot; name=&quot;Contact.FirstName&quot;
                  type=&quot;text&quot; value=&quot;&quot; autocomplete=&quot;off&quot; spellcheck=&quot;false&quot; dir=&quot;auto&quot;
                  style=&quot;position: relative; vertical-align: top; background-color: transparent;&quot;&gt;
              &lt;pre aria-hidden=&quot;true&quot;
                  style=&quot;position: absolute; visibility: hidden; white-space: pre; font-family: Lato, &amp;quot;Helvetica Neue&amp;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;&quot;&gt;&lt;/pre&gt;
              &lt;div class=&quot;tt-menu&quot; style=&quot;position: absolute; top: 100%; left: 0px; z-index: 100; display: none;&quot;&gt;
                  &lt;div class=&quot;tt-dataset tt-dataset-name&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Save&lt;/button&gt;
  </code></pre>