更新时间:2021-07-24 22:24:03
为了处理引导程序下拉列表上的选择,您可以将click事件处理程序绑定到 ul.dropdown-menu元素.
这也使您能够从嵌套的 li 元素中捕获点击事件,实际上可以将其视为选择事件.
This enables you to capture click events from the nested li elements as well, which can in fact be treated as selection events.
假定此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>
然后,您可以使用以下方法处理引导程序下拉列表中的选择 此事件处理程序:
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();
}
});
我认为只有第二个参数接受 Bloodhound ,值得考虑.
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" 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>