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><inputtype="text"id="typeahead"name="date"placeholder="date"class="form-control"data-provide="typeahead"autocomplete="off" /></div><divclass="btn-group"><buttonclass="btn btn-default dropdown-toggle"id="dates-dropdown-button"type="button"data-toggle="dropdown"href="#"><!-- Placeholder for the selected th date --><spanclass="selection"><?=$reminder_table_th_date?></span><spanclass="caret"></span></button><ulclass="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: newBloodhound({
      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: 05px10pxrgba(0,0,0,.2);
  border-radius: 9px;
  padding: 10px;
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://code.jquery.com/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><scriptsrc="https://code.jquery.com/jquery-3.1.0.js"></script><scriptsrc="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script><div><inputtype="text"id="typeahead"name='name'placeholder='Serach for ...'class="form-control"data-provide="typeahead"autocomplete="off" /></div><divclass="btn-group"><buttonclass="btn btn-default dropdown-toggle"id="dates-dropdown-button"type="button"data-toggle="dropdown"href="#"><!-- Placeholder for the selected th date --><spanclass="selection"><?=$reminder_table_th_date?></span><spanclass="caret"></span></button><ulclass="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>