javascript - 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下拉字段或下拉列表中选择一项，则所选项目应该是该字段显示的值。我尝试了很多很多方法，例如:

How to Display Selected Item in Bootstrap Button Dropdown Title

Bootstrap 3 dropdown select

Bootstrap typeahead - How to set the default value manually

但它们都不起作用，我不知道为什么。我根本不是 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 下拉列表中显示所选项目

为了处理 Bootstrap 下拉列表中的选择，您可以将点击事件处理程序绑定(bind)到 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>

然后您可以使用以下命令处理 Bootstrap 下拉列表上的选择该事件处理程序:

// 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。预输入值

我认为如何将数据源分配给预输入有一个问题，只有第二个参数接受 datasources 。此外 typeahead.js 提供了更丰富的数据源实现，称为 Bloodhound ，值得考虑。

我创建了一个使用 Bloodhound 数据源的演示。它还演示了如何指定 typeahead 的值以及如何处理 typeahead 选择。

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