我有一个带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调用填充）
我想做的两件事：如果我在带有typeahead的ajax下拉字段或下拉列表中选择一个项目，则所选项目应该是该字段显示的值。我尝试了很多方法，例如：
How to Display Selected Item in Bootstrap Button Dropdown Title
Bootstrap typeahead - How to set the default value manually
但他们都没有工作，我不知道为什么。我根本不是JS / jQuery大师，但那只是可疑的。我应该在哪里放置这个函数的jQuery代码以及如何？
PS：Firefox Firebug没有显示任何JS错误，他们只是没有做任何事情，价值没有设置或者他们的功能没有被调用。
这是类型头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>
答案 0 :(得分：0)
为了处理引导下拉列表中的选择，您可以将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();
}
});
我认为只有第二个参数接受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>