title: Selected item on Bootstrap dropdown list
body: <p>I have a website with Bootstrap framework. I have two very nasty input fields I'm stuck with, because I can't get them to work properly...</p>
  
  <p>One is this Bootstrap Typeahead input field:</p>
  
  <pre><code>&lt;input type="text" id="typeahead" name='name' placeholder='The name' class="form-control" data-provide="typeahead" autocomplete="off" /&gt;
  </code></pre>
  
  <p>The other is this dropdown list:</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
              &lt;button class="btn btn-default dropdown-toggle" id="dates-dropdown-button" type="button" data-toggle="dropdown" href="#"&gt;
                  &lt;?=$reminder_table_th_date?&gt;
                  &lt;span class="caret"&gt;&lt;/span&gt;
                &lt;/button&gt;
                &lt;ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="name-dates-dropdown"&gt;
                &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(the <code>&lt;li&gt;</code> list is populated via Ajax call)</p>
  
  <p>With both I want to do: if I select one item either on the ajax dropdown field with the typeahead or with the dropdown list the selected item should be the value what the field is showing. I tried many-many ways, for example:</p>
  
  <p><a href="https://stackoverflow.com/questions/13437446/how-to-display-selected-item-in-bootstrap-button-dropdown-title">How to Display Selected Item in Bootstrap Button Dropdown Title</a></p>
  
  <p><a href="https://stackoverflow.com/questions/23662150/bootstrap-3-dropdown-select">Bootstrap 3 dropdown select</a></p>
  
  <p><a href="https://stackoverflow.com/questions/18309322/bootstrap-typeahead-how-to-set-the-default-value-manually">Bootstrap typeahead - How to set the default value manually</a></p>
  
  <p>but none of them is working and I don't know why. I'm not a JS/jQuery guru at all, but that's just suspicious. Where exactly should I place the jQuery code for this functions and how?</p>
  
  <p>PS: Firefox Firebug isn't showing any JS errors, they just don't do anything, the values aren't set OR the function for them isn't called.</p>
  
  <p>This is the jQuery code for the typeahead Ajax call, the dropdown population (this is working well) and there is also one line where the typeahead value should be set (in the updater), but sadly that's not working:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(document).ready(function() {
        $('#typeahead').typeahead({
          source: function (query, process) {
            $.ajax({
              url: '/functions/name-autocomplete.php',
              type: 'POST',
              dataType: 'JSON',
              data: 'query=' + query,
              success: function(data) {
                process(data);
              }
            });
          },
          displayText: function(item) {
              return item
          },
          updater: function (item) {
              $('#typeahead').typeahead('val', item);
              $.ajax({
              url: '/functions/name-dates-autocomplete.php',
              type: 'POST',
              dataType: 'JSON',
              data: 'query=' + item,
              success: function(data) {
                $('#name-dates-dropdown').html(data);
              }
            });
          }
        });
      });
  
  &lt;/script&gt;
  </code></pre>