Bootstrap下拉列表中的選定項目

Question

我有一個帶有Bootstrap框架的網站。 我有兩個非常討厭的輸入字段，因為我無法讓它們正常工作...

一個是該Bootstrap Typeahead輸入字段：

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

另一個是此下拉列表：

<div class="btn-group">
            <button class="btn btn-default dropdown-toggle" id="dates-dropdown-button" type="button" data-toggle="dropdown" href="#">
                <?=$reminder_table_th_date?>
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="name-dates-dropdown">
              </ul>
</div>

（ <li>列表是通過Ajax調用填充的）

兩者都想做：如果我在ajax下拉字段中選擇一個項目，或者使用typeahead或下拉列表，則所選項目應該是該字段顯示的值。 我嘗試了很多方法，例如：

如何在Bootstrap按鈕下拉標題中顯示所選項目

Bootstrap 3下拉選擇

Bootstrap typeahead-如何手動設置默認值

但他們都不在工作，我也不知道為什么。 我根本不是JS / jQuery專家，但這只是可疑。 我應該將jQuery代碼確切放置在何處以及如何放置？

PS：Firefox Firebug沒有顯示任何JS錯誤，它們只是不執行任何操作，未設置值或未調用其功能。

這是用於typeahead Ajax調用的jQuery代碼，下拉列表填充（工作正常），還有一行應設置typeahead值（在更新程序中），但可惜的是這行不通：

<script type="text/javascript">

    $(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);
            }
          });
        }
      });
    });

</script>

Answer 1

1.在Bootstrap下拉列表中顯示選定的項目

為了處理引導程序下拉列表中的選擇，您可以將click事件處理程序綁定到ul.dropdown-menu元素 。

這也使您能夠從嵌套的li元素中捕獲單擊事件，實際上可以將其視為選擇事件。

假定此html結構：

<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>

然后，您可以使用以下事件處理程序處理引導程序下拉列表上的選擇：

// 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.js提供了更豐富的數據源實現，稱為Bloodhound ，值得考慮。

我創建了一個使用獵犬數據源的演示。 它還演示了如何指定預輸入的值以及如何處理預輸入選擇。

 $(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" rel="stylesheet"/> <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>