Selected Item On Bootstrap Dropdown List

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... One is this Bootstrap Typeahead input fie

Solution 1:

1. Display the selected item on Bootstrap dropdown list

In order to handle selections on a bootstrap dropdown list, you can bind an click event handler to the ul.dropdown-menu element.

This enables you to capture click events from the nested li elements as well, which can in fact be treated as selection events.

Assume this html structure:

<div>
    <input type="text"
        id="typeahead"
        name="date"
        placeholder="date"
        class="form-control"
        data-provide="typeahead"
        autocomplete="off" />
</div>

<div class="btn-group">
    <button class="btn btn-default dropdown-toggle"
    id="dates-dropdown-button" type="button"
    data-toggle="dropdown" href="#">
        <!-- Placeholder for the selected th date -->
        <span class="selection"><?=$reminder_table_th_date?></span>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="name-dates-dropdown">
        <li>12.11.97</li>
        <li>10.01.07</li>
        <li>2.11.2017</li>
    </ul>
</div>

Then you can handle selection on a bootstrap dropdown list with this event handler:

// handles selections on a bootstrap dropdown list
$('.dropdown-menu').click(function (e) {
    var isLITag = e.target && e.target.tagName == 'LI';
    if (isLITag) {
        var selectedValue = $(e.target).text();
        $('#typeahead').typeahead('val', selectedValue);
        // Specifies the display value of the dropdown element
        $('.dropdown-toggle .selection').text(selectedValue);
        e.preventDefault();
    }
});

2. Typeahead value

I think there is a problem how you assign the datasource to the typeahead only the second parameter accepts a datasources. Furthermore typeahead.js provides a richer data source implementations called Bloodhound, it is worth to consider.

I created a demo that makes use of the bloodhound data source. It also demonstrates how to specifies the value of typeahead and how you can handle typeahead selections.

$(document).ready(function() {

  // Constructs the suggestion engine with a set of local dummy dates.
  var dateSet = {
    name: 'dates',
    display: 'date',
    source: new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('date'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: [{
          'date': '12.11.97',
          'id': 0
        }, {
          'date': '2.11.2017',
          'id': 1
        }, {
          'date': '10.01.07',
          'id': 2
        }]
        /**
         * In order to integrate your ajax call
         * replace the local attribute with:
         *
         * remote: {
         *   url: '/functions/name-autocomplete.php?query=%QUERY',
         *   wildcard: '%QUERY'
         * }
         *
         * Twitter provides a list of examples at:
         *  http://twitter.github.io/typeahead.js/examples/
         *
         */
    })
  };

  // Creates the typeahead and assign the dateSet.
  $('#typeahead').typeahead({
    minLength: 1
  }, dateSet);

  // The selection handler sets the value for the drop down-menu
  // whenever a suggestion is chosen.
  $('#typeahead').bind('typeahead:select', function(ev, selection) {
    $('.dropdown-menu').val(selection.date);
    $('.dropdown-toggle .selection').text(selection.date);
  });

  // handles selections on a bootstrap dropdown list
  $('.dropdown-menu').click(function(e) {
    var isLITag = e.target && e.target.tagName == 'LI';
    if (isLITag) {
      var selectedValue = $(e.target).text();
      $('#typeahead').typeahead('val', selectedValue);
      //Specifies the display value of the dropdown element
      $('.dropdown-toggle .selection').text(selectedValue);
      e.preventDefault();
    }
  });
});

.tt-menu {
  background: white;
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
  border-radius: 9px;
  padding: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
  
<div>
  <input type="text"
         id="typeahead"
         name='name'
         placeholder='Serach for ...'
         class="form-control"
         data-provide="typeahead"
         autocomplete="off" />
</div>

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle"
          id="dates-dropdown-button" type="button"
          data-toggle="dropdown" href="#">
    <!-- Placeholder for the selected th date -->
    <span class="selection"><?=$reminder_table_th_date?></span>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="name-dates-dropdown">
    <li>12.11.97</li>
    <li>10.01.07</li>
    <li>2.11.2017</li>
  </ul>
</div>